祖尔布基金会两个顶级酒吧

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

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

    <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>

我还建议坚持使用基础网格系统，并将顶部横幅部分完全分离在自己的行中，并避免那些高度：100样式。 该网站将响应迅速且表现良好，只要您使用他为基金会构建的所有课程。