nav bar collapse avec logo

Version imprimable

Bonjour, j'ai un petit soucis de navbar collapse, j'aimerais mettre le logo a gauche du navbar et les lien au milieu du navbar et que le logo s'affiche même si la page est réduite
voici que j'ai réalisé

html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar</title>
           <link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" type="text/css" href="js.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
   </head>
   <body>
 
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="nav">
        <ul class="nav navbar-nav navbar-left" id="nav">
            <li><a  href="#home" class="active"><img src="Logo_Jauna_Loc_3.ico"  alt="Logo_Jauna_Loc"/></a></li>
        </ul>
        <ul class="nav navbar-nav navbar-center">
            <li><a href="#">Center 1</a></li>
            <li><a href="#">Center 2</a></li>
            <li><a href="#">Center 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right</a></li>
        </ul>
    </div>
</nav>
 
   </body>
 
</html>

Code:

1
2
3
4
5
6
7
8
function myFunction() {
  var x = document.getElementById("nav");
  if (x.className === "navbar-collapse.collapse") {
    x.className += " responsive";
  } else {
    x.className = "navbar-collapse.collapse";
  }
}

Merci pour vos réponse

Bonjour,

• essaie de modifier la structure HTML de ton élément <nav> comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a href="#home" class="active"><img src="Logo_Jauna_Loc_3.ico" alt="Logo_Jauna_Loc" /></a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse" id="nav">
    <ul class="nav navbar-nav navbar-center">
      <li><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

• Dans ta <head> Il manque la balise meta :

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

• Je ne vois pas l'utilité du code JavaScript que tu as join !?!

Merci pour ta réponse mais n'arrive toujours pas, c'est centré au niveau du logo mais pas sur la largeur de la page internet,
j'ai essayer cette méthode

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   </head>
   <body>
 
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a href="#home" class="active"><img src="Logo_Jauna_Loc_3.ico" alt="Logo_Jauna_Loc" /></a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse" id="nav">
    <ul class="nav navbar-nav navbar-center">
      <li><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav> 
   </body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
nav
{
    display: inline-block;
    text-align: center;
}
 
nav ul
{
    list-style-type: none;
    align-content: center;
}
 
nav li
{
align-content: center;
 
}

sa me donne le même résultat
merci pour ton aide

18/06/2020, 16h25
NoSmoking

Citation:

... mais n'arrive toujours pas, c'est centré au niveau du logo mais pas sur la largeur de la page internet

Pourrait-on avoir un croquis de ce que tu souhaites suivant la largeur car je ne visualise pas ce que tu cherches à faire/obtenir.