Menu icon Foundation
How to center top-bar nav?

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

Look at the code sample ... and to this site (under construction)
The nav is centered but doesn't look like it ... what's happening here? And how to solve this one?

csstopbarcentercustom top-bar

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

Look at the code sample ... and to this site (under construction)
The nav is centered but doesn't look like it ... what's happening here? And how to solve this one?

This post has been closed. No new replies can be added.

Asif over 5 years ago

I think you are referring to centering the links on the top-bar:

check the following link:

http://foundation.zurb.com/forum/posts/551-how-to-topbar-li-centered

Joop Vos over 5 years ago

Thanks @Asif ... and with an active ul.title-area the .top-bar-section must have a negative margin on the left ... in my case:

nav.top-bar {
text-align:center;
}
section.top-bar-section {
display: inline-block;
margin-left: -132px;
}

Sebastian Sulinski almost 5 years ago

Probably worth adding that these should be applied to

@media #{$topbar-media-query}

(above the breakpoint) - otherwise on mobile devices your navigation will be centered and won't fill in the full width of the screen because of the inline-block

Romulo about 4 years ago

Hello Sebastian Sulinski, could explain me better where to insert it , @media #{$topbar-media-query} , thank you.
```@media #{$topbar-media-query}

Rafi Benkual about 4 years ago

I think he means, use it as the media query:

@media #{$topbar-media-query} {
  nav.top-bar {
    text-align:center;
  }
  section.top-bar-section {
    display: inline-block;
  }
}

Here is another solution http://codepen.io/winghouchan/pen/yFsIn

Sebastian Sulinski about 4 years ago

Sorry - yes - either directly inside of the file bower_components/foundation/scss/foundation/components/_top-bar.scss or in any file that follows it (can overwrite the definitions).

In that file you'll find the line that reads:

// Top Bar styles intended for screen sizes above the breakpoint.
    @media #{$topbar-media-query} {

You should place this code within that section - so that it only applies to the layout above the break point (when the navigation is displayed in full rather than mobile format).