如何使導航resposive

Question

演示應用程序，你是在這裏：App

導航看起來我想在小屏幕上，只有「主頁」鏈接，切換右邊按鈕。

切換按鈕工作，但它示出了內嵌元素，我想顯示元件的一個belove其他

@media screen and (max-width: 600px) { 
 
    /*.topnav li:not(:first-child) {display:none;}*/ 
 
    .topnav li:not(:nth-child(2)) {display:none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
    .topnav li { 
 
\t \t display: inline-block; 
 
    } 
 
}

<nav id="main"> 
 
    <div class="topnav" id="myTopnav"> 
 

 
    <ul> 
 
    <li class="logo"><a href="/">HOME.</a></li> 
 
    <li><a href="/">HOME</a></li> 
 
    {{#if user.admin }} 
 
    <li class="active"><a class="accordion-toggle btn-block text-warning" href="/admin"><i class="fa fa-cogs" aria-hidden="true"></i> Administration</a></li> 
 
    {{/if}} 
 
    <li> 
 
     <a href="/shopping-cart"> 
 
     <i class="fa fa-shopping-basket" aria-hidden="true"></i> Shopping Cart 
 
     <span class="badge">{{ session.cart.totalQty }}</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="/user/contact"><i class="fa fa-envelope-o" aria-hidden="true"></i></i> Contact Us</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> User <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
     {{# if login }} 
 
      <li><a href="/user/profile">User Account</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="/user/logout">Logout</a></li> 
 
     {{ else }} 
 
      <li><a href="/user/signin">Sing in</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="/user/signup">Sing up</a></li> 
 
     {{/if}} 
 
     </ul> 
 
    </li> 
 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
    </ul> 
 
</div> 
 
</nav> 
 

 
<script type="text/javascript" src="javascripts/navbar.js"></script>

Answer 1

添加display:block到nav ul當下面600px的：

@media screen and (max-width: 600px) { 
    /*.topnav li:not(:first-child) {display:none;}*/ 
    .topnav li:not(:nth-child(2)) {display:none;} 
    .topnav a.icon { 
    float: right; 
    display: block; 
    } 
    .topnav li { 
    display: inline-block; 
    } 
    /*Add the following*/ 
    nav ul{ 
    display:block; 
    } 
}