ブートストラップ：ハンバーガーのアイコンは常にそこにあります

Question

私は最初のブートストラップサイトにいて、問題があります。 ナビゲーションは常に画面サイズでも縮小されています。ハンバーガーのアイコンは機能しますが、モバイルスクリーンのサイズでしか表示されません。

誰も助けてくれますか？

<div class="header-nav clearfix"> 
      <nav class="navbar navbar-fixed-top"> 
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
       </button> 
       <div class="navbar-collapse collapse " id="navbarSupportedContent"> 
       <ul class="nav"> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Über uns</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Karriere</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Downloads</a> 
        </li> 
        <li class="nav-item nav-item-gruen"> 
         <a class="nav-link" href="#">Kontaktieren Sie uns!</a> 
        </li> 
       </ul> 
       </div> 
      </nav> 
     </div> 

Answer 1

あなたのヘッダーにこのコードを入れて、もう一度試してください：

<meta name="viewport" content="width=device-width" />  
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Answer 2

大丈夫、私は前にこれを行うのdidnt。 希望です。

/* Header */ 
 
header{border-bottom:30px solid rgba(0,0,0,0.8);min-height:280px;} 
 

 

 
/* Navigation */ 
 

 
.header-nav {background:rgba(0,0,0,0.8);} 
 
.header-nav .nav {float:right;} 
 
.nav li a{display:inline-block;padding: 25px 60px; color:#fff;} 
 
.nav-item-gruen{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8eb73f+27,639d24+100 */ 
 
background: #8eb73f; /* Old browsers */ 
 
background: -moz-linear-gradient(top, #8eb73f 27%, #639d24 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(top, #8eb73f 27%,#639d24 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to bottom, #8eb73f 27%,#639d24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8eb73f', endColorstr='#639d24',GradientType=0); /* IE6-9 */ 
 
}

<header> 
 
     <div class="container-fluid position-fixed"> 
 
      <div class="logo-box"> 
 
       <img src="images/logo-idh.jpg" alt=""> 
 
      </div> 
 
    <div class="header-nav clearfix"> 
 
       <nav class="navbar navbar-fixed-top"> 
 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
        <span class="navbar-toggler-icon"></span> 
 
        </button> 
 
        <div class="navbar-collapse collapse " id="navbarSupportedContent"> 
 
        <ul class="nav"> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" href="#">Über uns</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" href="#">Karriere</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" href="#">Downloads</a> 
 
         </li> 
 
         <li class="nav-item nav-item-gruen"> 
 
          <a class="nav-link" href="#">Kontaktieren Sie uns!</a> 
 
         </li> 
 
        </ul> 
 
        </div> 
 
       </nav> 
 
      </div>   
 
      
 
     </div> 
 
     </header>