ブートストラップのハンバーガーメニューはページにありますが表示されません

Question

私はブートストラップのために左のナビゲーションバーで作業していますが、私を狂ったように動かす小さなものを除いては問題なく動作しています。

ハンバーガーメニューは、画面が狭いほどページに表示されますが、表示されません。私はそれをクリックすることができるので、そこにあることを知っている、それは動作し、私はクロムの要素を調べるときにそれを見ることができます。

私は最小スニペットを含めました。ハンバーガーメニューが表示されている場所をクリックすると、メニューが展開されます。あなたはハンバーガーメニューを自分自身に見せることができますか？

.navbar-left { 
 
    overflow: auto; 
 
    font-weight: 200; 
 
    color: #fff; 
 
    background-color: #3d486f; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 250px; 
 
    height: 100%; 
 
} 
 
.navbar-left a { color: #fff; } 
 
.navbar-left-header { margin: 15px 0; } 
 
.navbar-left ul, .navbar-left li { list-style: none; } 
 
.navbar-clear { clear: left; } 
 
@media (max-width: 767px) { 
 
    .navbar-left { 
 
    position: relative; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    } 
 
    .navbar-left .navbar-toggle { display: block; } 
 
} 
 
@media (min-width: 768px) { 
 
    #menu-content { display: block; } 
 
    .navbar-left .navbar-toggle { display: none; } 
 
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="navbar-left"> 
 

 
<div class="navbar-left-header"> 
 
Title 
 
<button type="button" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="navbar" class="collapsed navbar-toggle"> 
 
    <span class="sr-only">Toggle navigation</span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
</button> 
 
</div> 
 
<div class="navbar-clear"></div> 
 

 
<ul id="menu-content" class="collapse"> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
</ul> 
 
</div> 
 

 
</div>

Answer 1

：

.navbar-toggle{ 
    background-color: transparent; 
    background-image: none; 
    border: 1px solid transparent; 
} 

ので、この追加：

.navbar-toggle .icon-bar { 
    background-color: #fff; 
} 

しかし、最も簡単な方法をそれを正しくするには、あなたのnavbarにnavbar-defaultクラスを追加するので、ブートストラップは.icon-barにデフォルトを適用してから、それを拡張することができます。

私はきちんとbootstrap documentation for navbarを確認するか、この例を確認するためにアドバイスします：

https://getbootstrap.com/examples/navbar/

Answer 2

だけでトリックを行う必要があります.icon-barにbackground-colorを追加.icon-bar

.navbar-toggle .icon-bar { 
    background-color: #fff; 
} 

Answer 3

に背景色を追加します。

あなたはちょうどそれが親から継承されるので、バーをアイコンに背景色を追加する必要が

             
  
 
   
 
    
.navbar-toggle .icon-bar{background-color:white;} 
 
    .navbar-left { 
 
     overflow: auto; 
 
     font-weight: 200; 
 
     color: #fff; 
 
     background-color: #3d486f; 
 
     position: fixed; 
 
     top: 0px; 
 
     width: 250px; 
 
     height: 100%; 
 
    } 
 
    .navbar-left a { color: #fff; } 
 
    .navbar-left-header { margin: 15px 0; } 
 
    .navbar-left ul, .navbar-left li { list-style: none; } 
 
    .navbar-clear { clear: left; } 
 
    @media (max-width: 767px) { 
 
     .navbar-left { 
 
     position: relative; 
 
     width: 100%; 
 
     margin-bottom: 10px; 
 
     } 
 
     .navbar-left .navbar-toggle { display: block; } 
 
    } 
 
    @media (min-width: 768px) { 
 
     #menu-content { display: block; } 
 
     .navbar-left .navbar-toggle { display: none; } 
 
    }
 
    
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
    <div class="navbar-left"> 
 

 
    <div class="navbar-left-header"> 
 
    Title 
 
    <button type="button" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="navbar" class="collapsed navbar-toggle"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 
    <div class="navbar-clear"></div> 
 

 
    <ul id="menu-content" class="collapse"> 
 
     <li>First</li> 
 
     <li>Second</li> 
 
     <li>Third</li> 
 
     <li>Fourth</li> 
 
    </ul> 
 
    </div> 
 

 
     </div>