Navbar wird nicht zum Burger oder reagiert nicht

Question

Ich habe versucht, meine Navbar anzupassen, ich habe die grundlegende Navbar von der Bootstrap-Site für 3.0 kopiert. Jetzt ändert sich mein Nav nicht in ein Burger-Nav, das benutzerdefinierte Hintergrundbild, das ich für die Nav-Sticks verwende, das Logo-Sticks, aber die Nav-Tasten verschwinden. Ich nehme an, dass sie unter dem Hintergrundbild oder außerhalb des Bildschirms zu einem Burger werden.

.navbar { 
 
    background: url(../images/mainnav.png) no-repeat top center; 
 
    border-radius: 0; 
 
    border: 0; 
 
    height: 100px; 
 
    width: 980px; 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
.navspace { 
 
    padding: 30px 46px 30px 46px; 
 
} 
 

 
.navposition { 
 
    margin-left: 100px; 
 
} 
 

 
.navbar-brand { 
 
    padding: 0; 
 
    position: relative; 
 
    left: 40px; 
 
    top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container nopadding"> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button>max-width: 100% 
 
       <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling - 
 
    -> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar- 
 
    collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navposition"> 
 
      <li class="navspace"><a href="#">Home</a></li> 
 
      <li class="navspace"><a href="#">Menu</a></li> 
 
      <li class="navspace"><a href="#">Location</a></li> 
 
      <li class="navspace"><a href="#">Contact Us</a></li> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav> 
 
    <div class="row"> 
 
     <div class="col-sm-12 banner "> 
 
      <p>10% off all pizzas 
 
       <br>this weekend only</p> 
 
      <h1>LIMITED TIME<br>ONLY</h1> 
 
     </div> 
 
    </div> 
 
    <div class="row thumbnails"> 
 
     <div class="col-sm-offset-1 col-sm-3"> 
 
      <img src="images/bodyimg.png" alt=""> 
 
     </div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-12"></div> 
 
    </div> 
 
</div>

Answer 1

Es gibt eine Reihe von Problemen mit Ihrem HTML. Einige Elemente sind auskommentiert, Überschüsse von schließenden Tags wie </li> oder </ul>, auch Sie haben max-width:100% in Ihrem HTML. Das hat nichts zu tun.

Zu Ihrer Frage, ist das Problem, dass Sie .navbar { width:980px } so natürlich eingestellt, dass, wenn Sie auf einem Bildschirm kleiner als 980px nicht alle .navbar sichtbar sein wird (die rechte Seite der Navigationsleiste nicht in den Bildschirm passt) so das Menü Burger ist es aber nicht sichtbar, weil die navbar größer als der Bildschirm ist

Wenn Sie Ihren .navbar von 980px sein wollen, sondern auch reaktions (Skala, wenn der Bildschirm kleiner ist), verwenden max-width:980px

unter

sehen

.navbar { 
 
    background: url(../images/mainnav.png) no-repeat top center; 
 
    border-radius: 0; 
 
    border: 0; 
 
    height: 100px; 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
.navspace { 
 
    padding: 30px 46px 30px 46px; 
 
} 
 

 
.navposition { 
 
    margin-left: 100px; 
 
} 
 

 
.navbar-brand { 
 
    padding: 0; 
 
    position: relative; 
 
    left: 40px; 
 
    top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container nopadding"> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling - 
 
-> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar- 
 
collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navposition"> 
 
     <li class="navspace"><a href="#">Home</a></li> 
 
     <li class="navspace"><a href="#">Menu</a></li> 
 
     <li class="navspace"><a href="#">Location</a></li> 
 
     <li class="navspace"><a href="#">Contact Us</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
    </nav> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12 banner "> 
 
     <p>10% off all pizzas 
 
     <br>this weekend only</p> 
 
     <h1>LIMITED TIME<br>ONLY</h1> 
 
    </div> 
 
    </div> 
 

 
    <div class="row thumbnails"> 
 
    <div class="col-sm-offset-1 col-sm-3"> 
 
     <img src="images/bodyimg.png" alt=""> 
 
    </div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12"></div> 
 
    </div> 
 
</div>

Answer 2

Ich habe das gleiche Problem hatte. Die Lösung war für mich die Einstellung der Hintergrundfarbe für die Symbolleiste in CSS:

.icon-bar { 
    background-color: black; 
}