9

The top bar nav on my site is left aligned like this:

| Home | aveoTSD | Silent Nite          |

I would like to center the top bar nav like this:

|          Home | aveoTSD | Silent Nite          |

Center it exactly like the red bar with "Example" text.

Here is my css.

j0k
  • 22,600
  • 28
  • 79
  • 90
user2343800
  • 133
  • 1
  • 4
  • 16

4 Answers4

18

You can do it by adding this to your CSS (and preferably removing conflicting styles):

.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • 2
    +1 -- this works perfectly and is generally the standard for doing full width centered list items. Not sure why it was voted down. – nickb Sep 02 '13 at 03:38
  • when I did this it messed up the small mobile version, especially for anything items with drop downs. anyone else have this problem or know the solution? – blnc Jun 14 '14 at 23:14
  • You probably should post a new question with a link for help on this. – ralph.m Jun 14 '14 at 23:42
  • @ralph.m I went ahead and did that and got shafted by moderators for duplicate questions... anyone looking to implement this without affecting effecting functionality see my answer here – blnc Jun 16 '14 at 03:28
5

Found this to be helpful: https://github.com/zurb/foundation/issues/1598

Set the container of the navigation to: text-align:center;

Then for the navigation itself, set the display to: display:inline-block;

Hope that helps!

cleegp
  • 69
  • 1
  • 2
2

Here is the best solution I've found that works for all resize events. It centers the Foundation 5 Top-bar elements.

SCSS: 

nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

HTML:

<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#"></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">
        <ul>
            <li><%= link_to 'LINK 1', root_path %></li>
            <li class="divider"></li>
            <li><%= link_to 'LINK2', link_path %></li>
            <li class="divider"></li>
            <li class="has-dropdown">
                <%= link_to 'Droping', "#" %>
                <ul class="dropdown">
                    <li><label>Label:</label></li>
                    <li><%= link_to 'DROP 1', drop_path %></li>
                    <li class="divider"></li>
                    <li><%= link_to 'DROP 2', drop_path %></li>
                </ul>
            </li>
            <li class="divider"></li>
        </ul>
    </section>
</nav>

blnc
  • 4,384
  • 1
  • 28
  • 42
0

Using the above example, I make a few tweaks. The above centers everything. The adjustments below centers the topbar, left justifies the text on drop-downs and centers the "hamburger" / menu-icon when in mobile:

/* center topbar */
/* set alignment to center for small screens */
nav.top-bar { text-align:center; }
nav.top-bar:not(.expanded) {
        text-align: center;
        section.top-bar-section { 
            /* align drop down menu text to left on large screens */
            text-align:left; 
            display: inline-block;

         }


}
/* center the mobile hamburger menu */
.top-bar .toggle-topbar.menu-icon {
 padding: 0;
 right: 50%;
 margin-right: -36px;
}
John W.
  • 1
  • 1