Foundation 5 Top Bar full width, but inside elements contained to grid

Question

I'm working with Foundation 5's top bar and I'd like the bar to be full width, but the actual navigation links to be contained to the grid. I want the navigation items to align with the body of text.

I've tried adding a row and/or columns inside the nav. I've tried using .contain-to-grid inside the nav and nothing seems to be working.

Here is my codepen to see: http://codepen.io/eladrin201/pen/BNGroR

Answer 1

You should wrap the nav outside with .contain-to-grid and not inside.

<div class="contain-to-grid"> <!-- Wrap -->
 <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"></li>
    <!-- Rest of code -->
  </ul>
 </nav>
</div>

Default CSS

.contain-to-grid .top-bar { /* Targets the descendant/child element */
    margin: 0 auto;
    max-width: 62.5rem;
}

Updated CodePen