Css 有2个导航行的顶杆- Zurb基金会5

我正在尝试创建一个固定的顶部栏，上面有两行，如图所示

到目前为止，我有以下代码，但它只在一行中呈现：

<div class="fixed contain-to-grid">
    <nav class="top-bar" data-topbar>        
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">My Site</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>
        <section class="top-bar-section">
            <!-- Left Nav Section -->
            <ul class="left">
                <li class="active"><a class="global-nav__link">About</a></li>
                <li class=""><a class="global-nav__link">Resume</a></li>
                <li class=""><a class="global-nav__link">Projects</a></li>
                <li class=""><a class="global-nav__link">Timeline</a></li>
                <li class=""><a class="global-nav__link active">Contacts</a></li>                    
            </ul>
            <!-- Right Nav Section -->
            <ul class="">
                <li class="active"><a href="#">EN</a></li>
                <li>|</li>
                <li><a href="#">PT</a></li>
            </ul>
        </section>
    </nav>
</div>

|

这是JSFIDLE

有什么想法吗？

这就是你的意思吗

如果是这样的话，则只有一行的HTML，其中有一个左右部分

我已经为另一行添加了HTML：

<!--second row-->

    <section class="top-bar-section">
        <!-- Left Nav Section -->
        <ul class="left">
            <li class="active"><a class="global-nav__link">Some</a></li>
            <li class=""><a class="global-nav__link">Buttons</a></li>
            <li class=""><a class="global-nav__link">Here</a></li>
            <li class=""><a class="global-nav__link">Timeline</a></li>
            <li class=""><a class="global-nav__link active">Contacts</a></li>                    
        </ul>           
    </section>

---

根据@Ben的回答，我也在手机上实现了这一点：

HTML（我不想删除我的棱角东西，但我想你会明白的）：

---

请提供CSS和jsfiddle。有人有线索吗？你就快到了。我想让“我的网站”同时占据第一和第二行，像这样吗？您只需要增加.name类的高度和其中的h1:.top bar.name、.top bar.name h1{height:90px；line height:90px；}如下所示，但这两个条只是语言条（PT，EN）在右上一行和左下一行的导航栏上，只需使用“clear:right”清除第二行，如果这为您解决了问题，请将我的答案标记为正确：）我遇到了这个问题，虽然小提琴中提供的解决方案适用于大屏幕，它破坏了我的移动导航：点击菜单按钮不再做任何事情。有什么建议吗？

.top-bar {
    height:90px;
    line-height:90px;
}

<div class="sticky">
   <nav class="top-bar" data-topbar role="navigation" data-options="scrolltop: false">
     <ul class="title-area">
       <li class="name">
         <h1 class="show-for-small-only">
           <!-- text in mobile menu button -->
           <a href="#">
             MyApp - {{menu.CurrentTitle()}}
           </a>
         </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">
       <div ng-repeat="group in menu.Structure">
         <ul class="left">
           <!-- I have one featured "lead-item" in the beginning of the row -->
           <li>
             <a href="{{menu.GeneratePath(group.LeadItem)}}" class="lead-item" onclick="document.querySelector('nav.top-bar').classList.remove('expanded')">
                    {{group.LeadItem.Name}}
             </a>
           </li>
           <!-- these are just on the left -->
           <li ng-repeat="item in group.Items">
             <a href="{{menu.GeneratePath(item)}}"
                onclick="document.querySelector('nav.top-bar').classList.remove('expanded')">
               {{item.Name}}
                </a>
              </li>
              <li style="width: 15rem"></li>
            </ul>
            <!-- and these are on the right -->
            <ul class="right">
              <li ng-repeat="item in group.AdditionalItems">
                <a href="{{menu.GeneratePath(item)}}"
                   onclick="document.querySelector('nav.top-bar').classList.remove('expanded')">
                  {{item.Name}}
                </a>
              </li>
            </ul>
          </div>
        </section>
      </nav>
    </div>

@media #{$medium-up} // mobile collapses as intended originally
  .sticky:not(.fixed) nav.top-bar
    height: 90px
    line-height: 90px