bootstrap css navbar sur mobile ne montre pas

Question

Je voudrais montrer à la fois le logo et le bouton sur ma page en version mobile. J'utilise actuellement navbar bootstrap:

 <div class="navbar-header"> 
      <a class="navbar-brand" href="#first" > 
       <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;"> 
      </a> 
     </div> 
     <div class="navbar-collapse collapse" id="bs-navbar"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a class="page-scroll" class="active" href="#first">Home</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#one">About</a> 
       </li> 
      </ul> 
     </div> 

Avec le code suivant seulement le logo dans la barre de navigation en-tête est indiqué sur les boutons non mobiles, Accueil, À propos, etc. Je n'ai aucun problème sur le bureau.

Answer 1

Première: base de votre HTML, vous n'avez pas

<nav class="navbar navbar-default"> 
</nav> 

Il devrait être

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#first"> 
     <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;"> 
    </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="bs-navbar"> 
    <ul class="nav navbar-nav"> 
     <li> 
     <a class="page-scroll" class="active" href="#first">Home</a> 
     </li> 
     <li> 
     <a class="page-scroll" href="#one">About</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

Deuxième: Bootstrap cache la barre de navigation-effondrement mobile, mais vous pouvez l'activer à l'aide d'un bouton ..

A fiddle sans le bouton ..

A fiddle avec le bouton ..

Answer 2

Essayez de supprimer les classes navbar-collapse collapse et id bs-navbar. Ces classes sont liées à la bibliothèque d'amorçage et réduisent le menu lorsque la fenêtre d'affichage détecte une largeur donnée de l'écran (périphériques mobiles). En supprimant ces classes, les boutons seront toujours affichés, même dans les appareils mobiles.