カスタムメディアクエリを使用したブートストラップモバイルメニュー

Question

私はメディアクエリを適用したブートストラップメニューを持っています。 このクエリでは、モバイルビューで拡張可能な「ハンバーガーモバイルアイコン」の下に余分なコンテンツが表示されます。それはもはや、アイコンを表示している

問題

、その私のエラーやブートストラップ問題があればわからないイム。ブートストラップで誰かがその問題を見ることができるかどうかを調べることができます。

私のメニュー

<nav class="navbar navbar-inverse-light-grey navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" 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> 
      <?php 
      $this->load->helper('html'); 
      $img = base_url('img/Servare.png'); 
      $path = 'home'; 
      ?> 
      <div class="logo-img"> 
       <?php 
       echo anchor($path, img($img)); 
       ?> 
      </div> 
     </div> 

     <div id="desktop-content"> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <?php 
        if ($this->session->userdata('id')) { ?> 
         <li><?php echo anchor('login/logout', 'Logout'); ?></li> 
         <?php 
        } else { ?> 
         <li><?php echo anchor('login', 'Login'); ?></li> 
         <li><?php echo anchor('login/signup', 'Sign up'); ?></li> 

         <?php 
        } 
        ?> 
       </ul> 
      </div> 
     </div> 
     <div id="mobile-content"> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <?php 
        if ($this->session->userdata('id')) { ?> 
         <li><?php echo anchor('members', 'Your Dashboard'); ?></li> 
         <li><?php echo anchor('profile', 'Account Overview'); ?></li> 
         <li><?php echo anchor('banks', 'Add Regular Savings'); ?></li> 
         <li><a href="#">Notification Accounts<br>(coming soon)</a></li> 
         <li><a href="#">Fixed rate Bonds<br>(coming soon)</a></li> 
         <?php 
        } else { ?> 
         <li><?php echo anchor('login', 'Login'); ?></li> 
         <li><?php echo anchor('login/signup', 'Sign up'); ?></li> 

         <?php 
        } 
        ?> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 

マイクエリ

@media screen and (min-width: 0px) and (max-width: 600px) { 
    #mobile-content { display: block; } /* show it on small screens */ 
} 

@media screen and (min-width: 601px) { 
    #mobile-content { display: none; } /* hide it elsewhere */ 
} 

@media screen and (min-width: 0px) and (max-width: 600px) { 
    #desktop-content { display: none; } /* hide iton small screens */ 
} 

@media screen and (min-width: 601px) { 
    #desktop-content { display: block; } /* show it elsewhere */ 
} 

Answer 1

ボタンでデータ・ターゲットは（IDを指している）#navbarに設定されています。しかし、そのidはページ上で2回発生します（これは許可されません）。今、あなたはボタンを変更することにより、それを修正することができますので、唯一のモバイルページはおそらく、ボタンを使用して、ドロップダウンメニューを持っている必要があります。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-mobile" 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でIDを変更する必要があります。ボタンが指しているIDに変更します。

<div id="navbar-mobile" class="navbar-collapse collapse"> 

それは私のためにそれを修正しました。お役に立てれば！