html - 如何使导航响应

Question

演示应用程序您在这里:App

导航在小屏幕上看起来和我想要的一样，只有“主页”链接和右侧的切换按钮。

切换按钮有效，但它显示的是内联元素，我想显示彼此相爱的元素

@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

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

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