A Top Bar with 2 navigation rows - Zurb Foundation 5

Question

I am trying to create a fixed top bar with 2 rows as described in the picture

So far I have the following code but it renders in only one row:

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

Here is the JSFiddle jsfiddle.net/Bonomi/cc9ay

Any Ideas?

Answer 1

http://jsfiddle.net/Ty3ZT/4/

Is this what you mean?

If so there was only the HTML for one row with a left and right section in.

I've added the HTML for another row:

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

As the height was fixed to 45px I've had to double it to add the background for the second row:

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

Answer 2

Based on @Ben's answer, I made this working on mobile too:

HTML (I didn't feel like removing my angular stuff, but I guess you'll get the point):

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

SASS:

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