Hamburger und Drop-Down nicht in Mobile mit Bootstrap navbar

Ich habe die Bretter hier gesucht und nichts scheint zu decken, was könnte falsch sein. Meine Navbar ist gut und gut, aber kein Hamburger oder Menü zeigt sich, wenn ich mobil bin. Ich habe versucht, Kombinationen zu ändern und verschiedene Kollapsnamen zu implementieren, aber ohne Erfolg. Irgendwelche Ideen? Hier ist mein Code:Hamburger und Drop-Down nicht in Mobile mit Bootstrap navbar

 <header class="navbar navbar-custom" role="banner"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
    </div> 
    <nav class="collapse navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav pages"> 
       <li class="page"><a href="item1.html">item1</a></li> 
       <li class="page"><a href="item2.html">item2</a></li> 
       <li class="page"><a href="item3.html">item3</a></li> 
       <li class="page hidden-xs"><a href="item1.html"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></a></li> 
       <li class="page"><a href="item4.html">item4</a></li> 
       <li class="page"><a href="item5.html">item5</a></li> 
       <li class="page"><a href="item6.html">item6</a></li> 
      </ul> 
     </div> 
    </div> 
</header>

Quelle

2016-09-22 SealHead1

Irgendwelche Fehler in der Konsole? Haben Sie die richtigen Dateien aufgenommen? – j08691

Überprüfen Sie, ob Sie das Meta-Tag in Ihrem Kopfteil haben

<meta name="viewport" content="width=device-width, initial-scale=1">

Auch Ihr Nav-Tag nicht nach dem ul-Element endet. Überprüfen Sie Ihren Tag Schließungen

ich die </div> denke, nach der </ul>

ersetzt werden muss

Quelle

2016-09-22 20:19:01

Im ursprünglichen Code, gibt es ein div, die das nav schließt. Das ist passiert, als ich für diese Seite formatiert habe. Im Original wird es mit einem Nav-Tag geschlossen. Ich habe vergessen, die Header-Sets aufzunehmen. Hier sind sie:

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Home</title> 
    <link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ > 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
     crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script src="js/main.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
     crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"> 
    <script src="https://use.fontawesome.com/8633c13aa3.js"></script> 
</head>

Quelle

2016-09-22 20:37:01 SealHead1

sollten Sie die horizontale Scroll überprüfen, wenn u die screen.that minimieren einer der Gründe ist, wenn Sie Ihre Inhalte in nicht vollständig reagiert, und wenn u den Bildschirm minimieren die Scroll horizontal erscheint und das Hamburger Symbol nicht angezeigt ...

zunächst alle Inhalte entfernen, erwarten Sie die Navigation auf Ihrer Seite und dann minimieren Sie den Bildschirm. und wenn das Problem immer noch auftritt, dann sollten Sie auch überprüfen, dass Ihre Hintergrundfarbe und Farbe ändern oder nicht sind.

Quelle

2016-09-22 20:46:03

Ich habe das versucht. Kannst du erklären, was du mit der Hintergrundfarbe meinst? – SealHead1

Hamburger und Drop-Down nicht in Mobile mit Bootstrap navbar

Antwort

Verwandte Themen