@mediaドロップダウンメニュー - 表示メニュー

Question

異なる画面サイズに反応するようにしたい現時点で私は765px（そしてそれ以下）の幅で私のサイトをテストしています。 3つのバーをクリックするとメニューが表示されますが、何も起こりません。メニューは表示されず、「ブランド名」だけが表示されます。

私は自分のメニューにブートストラップナビゲーションを使用しています。外部ファイル

@media screen and (min-width: 280px) and (max-width: 765px){ 
/* code goes here */ 
    .primary { 
     color: orange !important; 
     font-size: 14px; 
    } 
} 

色の変化は、サイズをテストするためのものである： -

jQueryのコード：

これは、（編集）ページのスクリーンショットです。

HTML： - ナビゲーションのみ

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="navbar-header"> 
      <a class="navbar-brand" href="index.php"><span class="primary">#</span></a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.php">Home</a></li> 
        <li><a href="about.php">About</a></li> 
        <li><a href="services.php">Services</a></li> 
        <li><a href="contact.php">Contact</a></li> 
        <li><a href="privacy.php">Privacy</a></li> 
        <li><a href="terms.php">Terms</a></li> 
        <li><a href="copy.php">Copyright</a></li> 
       </ul> 
      </div><!-- navbar collapse --> 
     </div> 
    </nav> 

私は何を見逃していますか？ 問題をどのように解決できますか？

ご協力いただければ幸いです。

おかげ理由の

Answer 1

一つはjQueryとbootstrap.jsの順序をめちゃくちゃにされるだろう。ブートストラップでは、いくつかのイベントを実行するためにjQueryが必要です。したがって、jqueryスクリプトがbootstrap.min.jsまたはbootstrap.jsの前にあることを確認してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="index.php"><span class="primary">#</span></a> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="index.php">Home</a></li> 
 
        <li><a href="about.php">About</a></li> 
 
        <li><a href="services.php">Services</a></li> 
 
        <li><a href="contact.php">Contact</a></li> 
 
        <li><a href="privacy.php">Privacy</a></li> 
 
        <li><a href="terms.php">Terms</a></li> 
 
        <li><a href="copy.php">Copyright</a></li> 
 
       </ul> 
 
      </div><!-- navbar collapse --> 
 
     </div> 
 
    </nav>