Burger Navbar funktioniert nicht mit fester Position

Question

Ich habe ein Bootstrap-Menü, ich benutze die Position: behoben, um das Menü nicht zu scrollen, für kleine Anzeige funktioniert das Burger-Menü nicht, wenn ich Position lösche: behoben, es funktioniert, aber das Menü wird mit dem Seiteninhalt gescrollt:

Mein HTML:

<div class="col-sm-2"> 
      <div class="sidebar-nav"> 
       <div class="navbar navbar-default" role="navigation"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
        <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Menu Item 1</a></li> 
          <li><a href="#">ITERM1</a></li> 
          <li><a href="#">ITEM2</a></li> 
          <li><a href="#">ITEM3</a></li> 
         </ul> 
        </div><!--/.nav-collapse --> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-10"> 
      content blabla 
     </div> 

Meine CSS:

.navbar-default { 
    position: fixed; 
} 

Answer 1

Bitte überprüfen Sie den Beispielcode hier CODEPEN

HTML:

<div class="col-sm-12"> 
    <div class="sidebar-nav"> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
     </div> 
     <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Menu Item 1</a></li> 
      <li><a href="#">ITERM1</a></li> 
      <li><a href="#">ITEM2</a></li> 
      <li><a href="#">ITEM3</a></li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 
<div class="col-sm-10"> 
    content blabla 
</div> 
</div>