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.