中屏幕上的 Foundation 顶部栏菜单

Question

刚开始使用粉底液，我一直在尝试弄清楚如何仅在中小屏幕上显示汉堡菜单。 任何帮助将非常感激。

<!-- TOP BAR---------------------------------------------------------------------->
    <div class="contain-to-grid"> 
    <nav class="top-bar" data-topbar role="navigation">
              <ul class="title-area">
                   <li><a href="index.html"><img src="img/logo-top.png" alt="" class="branding"></a></li>

                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
              </ul>

              <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                   <li><a href="#guides">Test</a></li>
                  <li><a href="#gallery">Test</a></li>
                  <li><a href="#boats">Test</a></li>
                  <li><a href="#rates">Test</a></li>
                  <li><a href="#contact">CTest</a></li>
                </ul>
              </section>
         </nav>
  </div> 

Answer 1

一个快速的方法是将类hide-for-large到您的第一个 div 或导航。

例如，

<div class="contain-to-grid hide-for-large">或<nav class="top-bar hide-for-large" data-topbar role="navigation">