Navbarがハンバーガーになったり反応したりしない

Question

私はnavbarをカスタマイズしようとしましたが、3.0のbootstrapサイトから基本的なnavbarをコピーしました。さて、私のnavはバーガーnav、navスティック、ロゴスティックに使用しているカスタム背景画像に変わりませんが、navボタンは消えます。私は彼らが背景画像の下または画面外のバーガーに変身したと推測しています。

.navbar { 
 
    background: url(../images/mainnav.png) no-repeat top center; 
 
    border-radius: 0; 
 
    border: 0; 
 
    height: 100px; 
 
    width: 980px; 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
.navspace { 
 
    padding: 30px 46px 30px 46px; 
 
} 
 

 
.navposition { 
 
    margin-left: 100px; 
 
} 
 

 
.navbar-brand { 
 
    padding: 0; 
 
    position: relative; 
 
    left: 40px; 
 
    top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container nopadding"> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <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">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button>max-width: 100% 
 
       <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling - 
 
    -> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar- 
 
    collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navposition"> 
 
      <li class="navspace"><a href="#">Home</a></li> 
 
      <li class="navspace"><a href="#">Menu</a></li> 
 
      <li class="navspace"><a href="#">Location</a></li> 
 
      <li class="navspace"><a href="#">Contact Us</a></li> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav> 
 
    <div class="row"> 
 
     <div class="col-sm-12 banner "> 
 
      <p>10% off all pizzas 
 
       <br>this weekend only</p> 
 
      <h1>LIMITED TIME<br>ONLY</h1> 
 
     </div> 
 
    </div> 
 
    <div class="row thumbnails"> 
 
     <div class="col-sm-offset-1 col-sm-3"> 
 
      <img src="images/bodyimg.png" alt=""> 
 
     </div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
     <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-12"></div> 
 
    </div> 
 
</div>

Answer 1

HTMLにはいくつかの問題があります。いくつかの要素はコメントアウトされています。余分な閉じるタグ（</li>または</ul>など）、またmax-width:100%がHTMLにあります。それはそこにビジネスがない。あなたの質問について

は

、問題はあなたがそうのでofcourseのあなたは、画面上にあるときよりも小さい980pxませんが、すべての.navbarが表示されます（ナビゲーションバーの右側には、画面内に収まらない）という.navbar { width:980px }を設定することですバーガーメニューがありますが、あなたはあなたの.navbarは980pxであることだけでなく、応答（スケールと、画面が小さく）、max-width:980px

が

下記参照使用したい場合は navbarが画面

よりも大きいため表示されていません

.navbar { 
 
    background: url(../images/mainnav.png) no-repeat top center; 
 
    border-radius: 0; 
 
    border: 0; 
 
    height: 100px; 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
.navspace { 
 
    padding: 30px 46px 30px 46px; 
 
} 
 

 
.navposition { 
 
    margin-left: 100px; 
 
} 
 

 
.navbar-brand { 
 
    padding: 0; 
 
    position: relative; 
 
    left: 40px; 
 
    top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container nopadding"> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <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">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling - 
 
-> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar- 
 
collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navposition"> 
 
     <li class="navspace"><a href="#">Home</a></li> 
 
     <li class="navspace"><a href="#">Menu</a></li> 
 
     <li class="navspace"><a href="#">Location</a></li> 
 
     <li class="navspace"><a href="#">Contact Us</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
    </nav> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12 banner "> 
 
     <p>10% off all pizzas 
 
     <br>this weekend only</p> 
 
     <h1>LIMITED TIME<br>ONLY</h1> 
 
    </div> 
 
    </div> 
 

 
    <div class="row thumbnails"> 
 
    <div class="col-sm-offset-1 col-sm-3"> 
 
     <img src="images/bodyimg.png" alt=""> 
 
    </div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    <div class="col-sm-offset-1 col-sm-3"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12"></div> 
 
    </div> 
 
</div>

Answer 2

私は同じ問題を抱えていました。私の解決策は、CSSのアイコンバーの背景色を設定していました。

.icon-bar { 
    background-color: black; 
}