Zurb Foundation 两个顶栏

Question

我对使用 Zurb 还很陌生，所以我想知道是否有人可以为我提供一些启示。

http://www.bitandpiecesvape.co.uk/

这是我目前的网站（不运行 Zurb）。我正在尝试在 Zurb 中重新制作它，但我无法创建两个顶栏。

正如您在链接中看到的那样，我在横幅下方的深蓝色栏中有 5 个链接，然后是其下方浅蓝色区域中的类别。我怎样才能使它们像在链接中一样显示，但是在将浏览器调整为小尺寸时，它们都应该编译成一个下拉菜单。

我已经尝试使用下面的代码，它确实有效......但是第二个菜单只是在它下方浮动一点。我尝试使用 div 行类分隔两个菜单，但它停止了整个工作......显然我需要它在两行上，以便我可以将第二个菜单正确放置在它下方。

抱歉，我无法上传我的 Zurb 模板的当前版本，但我目前正在笔记本电脑上离线运行所有这些，因为我的 FTP 出现问题。

有什么想法吗？？？

谢谢。

<div style="width: 100%; height: 100px; background: #0d233c">
            <div class="row">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1>
                                <span class="show-for-small-only"><a href="#"><B>Bitandpieces Vape</B></a></span>
                            </h1>
                        </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>Menu</span></a></li>
                    </ul>
                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="left" style='height: 100%'>
                          <li class="active"><a href="">Home</a></li>
                          <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                          <li class="active"><a href="ourteam/">Product Support</a></li>
                          <li class="active"><a href="services/">Contact Us</a></li>
                          <li class="active"><a href="aboutus/">About Us</a></li>
                        </ul>
                    </section>
                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="left" style='height: 100%'>
                          <li class="active"><a href="">Home</a></li>
                          <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                          <li class="active"><a href="ourteam/">Product Support</a></li>
                          <li class="active"><a href="services/">Contact Us</a></li>
                          <li class="active"><a href="aboutus/">About Us</a></li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>

Answer 1

使用单独的 topbar 实例创建两个顶部栏而不是添加部分应该可以解决导航正确堆叠的问题，如果这最终是您选择使用的。

    <nav class="top-bar" data-topbar role="navigation">
         <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="left" style='height: 100%'>
                      <li class="active"><a href="">Home</a></li>
                      <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                      <li class="active"><a href="ourteam/">Product Support</a></li>
                      <li class="active"><a href="services/">Contact Us</a></li>
                      <li class="active"><a href="aboutus/">About Us</a></li>
                    </ul>
                </section>

            </nav>
    <nav class="top-bar" data-topbar role="navigation">

                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="left" style='height: 100%'>
                      <li class="active"><a href="">Home</a></li>
                      <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                      <li class="active"><a href="ourteam/">Product Support</a></li>
                      <li class="active"><a href="services/">Contact Us</a></li>
                      <li class="active"><a href="aboutus/">About Us</a></li>
                    </ul>
                </section>

            </nav>

我还建议坚持使用基础网格系统并将顶部横幅部分完全分开在它自己的行中，并避免使用那些 height:100 样式。只要您使用他为 Foundation 构建的所有类，该网站就会响应良好且表现良好。