Bootstrap Handy navbar nicht richtig

Question

Navbar zeigt korrekt arbeitet auf dem Desktop, sondern am Telefon sieht es wie folgt aus:

Wie kann ich das Menü auf mobile Version deaktivieren oder was ist der beste Weg, um repariere es?

Navbar Code:

<nav class="navbar navbar-vira navbar-fixed-top"> 
      <div class="navigation-bar"> 
      <div class="container"> 
       <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">Zamknij nawigację</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <div class="logo"> 
          <a href="#">XXXX</a> 
         </div> 
       </div> 
       <ul class="nav navbar-nav navbar-right font-white"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">O mnie</a></li> 
        <li><a href="#ofert">Oferta</a></li> 
        <li><a href="#contact">Kontakt</a></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

Answer 1

Wenn Sie das Menü wollen nicht auf dem Handy angezeigt werden. Sie sollten erwägen Medienanfragen und beschränken ihre Anzeige

Überprüfung der folgenden Ausschnitt

@media screen and (min-width:200px) and (max-width:500px){ 
 
    ul.nav{ 
 
    display:none; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-vira navbar-fixed-top"> 
 
      <div class="navigation-bar"> 
 
      <div class="container"> 
 
       <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">Zamknij nawigację</span> 
 
          <span class="icon-bar"></span> 
 
          <span class="icon-bar"></span> 
 
          <span class="icon-bar"></span> 
 
         </button> 
 
         <div class="logo"> 
 
          <a href="#">XXXX</a> 
 
         </div> 
 
       </div> 
 
       <ul class="nav navbar-nav navbar-right font-white"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#about">O mnie</a></li> 
 
        <li><a href="#ofert">Oferta</a></li> 
 
        <li><a href="#contact">Kontakt</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </nav>

Hoffe, es hilft PS Verwendung: Siehe die Ausgabe von Vollbild

Answer 2

hinzuzufügen auf zu der anderen Antwort, die zeigt, wie man das Nav vollständig versteckt,
das folgende HTML sollte das nav erlauben, normal zu arbeiten y. Sie müssen Bootstrap jQuery für die Dropdown-Funktion hinzufügen. Ich denke, dass das Logo div die Probleme verursacht hat.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse"> 
       <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="#">XXXX</a> 
      </div> 
      <div class="collapse navbar-collapse" id="main-nav-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">O mnie</a></li> 
        <li><a href="#ofert">Oferta</a></li> 
        <li><a href="#contact">Kontakt</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>