基础5：粘贴Nav for Mobile

Question

我有一个简单的单页网站。我使用“顶部”包裹在一个“固定”div，它适用于各种尺寸，但移动。在移动设备上，导航实际上是固定的，直到单击/轻击菜单图标。然后它打开页面顶部的菜单，导航不再固定。

这是我的代码：

<div class="fixed">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">

      <!-- Title Area -->
          <li class="name">
            <h1>
              <a href="#">Page Title</a>
            </h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"></a></li>
    </ul>

    <section class="top-bar-section">

      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li><a href="#process">Process</a></li>
        <li class="divider"></li>
        <li><a href="#books">Bookshelf</a></li>
         <li class="divider"></li>
        <li><a href="#brands">Brands</a></li>
        <li class="divider"></li>
        <li><a href="#want">Looking for</a></li>
        <li class="divider"></li>
        <li><a href="#contact">Contact</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
 </div>

提前致谢。