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