如何使Nav 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 {
		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

当低于600px时，将display:block添加到nav ul：

@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;
  }
}