Horizontally center zurb foundation top bar menu, with multiline items vertically centered

Question

Using Foundation, I'm trying to adjust the top-bar menu in order to have menu items looks something like that:

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

This means that:

1. Items have a fixed width
2. Items may have one or more lines (usually no more than 3 lines), but they must be alway vertically centered.
3. All items height must be the same as the highest item
4. Submenus (dropdown) must open below the hovered item

I've tried several option (display set to table-cell or inline-block with vertical align set to middle) and looked around the web, but I can't find a solution that meet all the requirements above.

Anyone ever tried to do that?

Answer 1

I cannot resolve your issue, but I can explain why it is difficult to do with Zurb Foundation.

• The way that buttons are implemented (and reused in the top-bar) in Zurb Foundation have the css display:inline-block set. This means that you cannot vertically align the text using vertical-align:middle This makes it impossible to automatically align buttons with multiline text.

• The top-bar is not designed to have evenly spaced elements. You can use a ul.button-group.event-6 to get closer to your desired layout, but it will not work with all of your constraints. It is designed to have a Logo, a left menu and a right menu.

• Setting the height is easy and can be done in css by applying height:80px for example to each of the buttons. However, the multiline text alignment will be to the top.

• Submenus can be simulated with a.button.dropdown but again, it won't meet all of your constraints

• The topbar functionality in foundation is contained mostly in a jQuery plugin in the foundation.topbar.js file. This would require a lot of modification to work in the way that you envision and would make your topbar likely incompatible with future and past versions of Foundation.

When trying to get your desired design to work with a specific framework you have a couple of options:

1. realign your goals to fit within the confines of the framework (i.e. reduce your number of constraints or change the design slightly to accomidate the limitations of Foundation)

2. use another framework that provides this functionality, check out this similar post about doing the same thing with bootstap

3. look for another library to accomplish the desired functionality (in your case maybe look at jQuery Mobile Navbars

4. write your own functionality

I this helps to explain some of the reasons why what you are trying to do is not possible with Zurb Foundation 3/4. If you resolve the issue it would be great if you posted back your solution as it seems many other people would like to do something similar.

Answer 2

Here is how to do it:

Add this to your CSS:

.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}

Be sure it will override Foundations CSS by putting it after the Foundation CSS.

In the HTML I removed the left or right class.

The above can break the mobile version. To fix this place this CSS below the above CSS:

@media only screen and (max-width: 58.75em) { /* TopBar Breakpoint */
.top-bar-section ul {display: inline; margin: 0;}
}

Also the classes may change depending on the version of Foundation requiring you to modify the CSS classes used above.

Answer 3

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

Do note the 'contain-to-grid' div class will keep the widths of the top-bar nav within the frameworks of the website yet will not actually center the nav elements.

The code below does.

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 'Dropping', "#" %>
                    <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>
            </ul>
        </section>
    </nav>
</div>

Answer 4

If i understand the question fine, i see lot of anwser explain that he need to change the css.

He can also use the class of Foundation : contain-to-grid

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

Live exemple : http://jsfiddle.net/gRtrX/37/ (size up to see the result)

It really look like

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜