A Full-Width Centered Navigation Top Bar - Zurb Foundation

Question

I am using Zurb Foundation 4 and I need my top bar navigation to be centered as .large-12.columns

I tried the following (but it doesn't work)

<div class="row">
  <div class="large-12 columns">
      <nav class="top-bar">
        <ul class="title-area">
          ...
        </ul>

        <section class="top-bar-section">
          <ul class="left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>

          <ul class="right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </section>
    </nav>
  </div>
</div>

Update:

I created jsFiddle based on Foundation Example If the browser size is big, the navigation width changes. But I want it to be centered fixed as main content.

Answer 1

As the Foundation 4 docs saying : http://foundation.zurb.com/docs/components/top-bar.html

If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid".

So try using the following :

<div class="contain-to-grid">
    <!-- Your nav bar -->
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title area here... -->
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <!-- Title area here... -->
            </ul>
            <ul class="right">
                <!-- Title area here... -->
            </ul>
        </section>
     </nav>
</div>

Hope this helps !

Answer 2

If I understand correctly what you want, you just need to wrap your nav.top-bar element in a div with class contain-to-grid.

<div class="row">
  <div class="contain-to-grid">
    <nav class="top-bar">
      <ul class="title-area">
        ...
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>

        <ul class="right">
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </section>

    </nav>
  </div>
</div>