Horizontal central menu of the upper zurb bar, with multi-line elements vertically centered

Question

Using Foundation, I'm trying to customize the top-level menu so that the menu items look something like this:

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

It means that:

• Elements have a fixed width.
• Elements can have one or more lines (usually no more than 3 lines), but they should always be centered vertically.
• The height of all elements should be the same as that of the tallest element.
• A submenu (drop-down menu) should open below a hung item

I tried several options (the display is set to a table cell or the built-in block with vertical alignment set to the middle) and browsed the website, but I can’t find a solution that meets all of the above requirements.

Has anyone ever tried to do this?

Answer 1

I cannot solve your problem, but I can explain why it is difficult to do with the Zurb Foundation.

• The way to implement buttons (and reuse in the top panel) in Zurb Foundation has a set of css display:inline-block . This means that you cannot vertically align text using vertical-align:middle This makes it impossible to automatically align buttons with multi-line text.

• The top panel is not intended for even placement of elements. You can use ul.button-group.event-6 to get closer to your desired location, but it will not work with all your restrictions. It is designed to have a logo, a left menu and a right menu.

• Setting the height is simple and can be done in css by applying height:80px for example, for each of the buttons. However, multi-line text alignment will be at the top.

• A submenu can be modeled using a.button.dropdown , but again, this will not meet all your restrictions

• The functionality of the top panel in the foundation is mainly contained in the jQuery plugin in the foundation.topbar.js file. This will require a lot of changes in order to work as you imagine, and make your top bar more likely incompatible with future and past versions of the Fund.

When trying to get the desired design for working with a specific structure, you have several options:

• rearrange your goals to fit the framework (i.e. reduce the number of restrictions or change the design a little, use the Fund’s limitations)

• use a different infrastructure that provides this functionality, check out this similar post on how to do the same with bootstap

• find another library to fulfill the desired functionality ( jQuery Mobile Navbars may be considered in your case

• write your own functionality

This helps explain some of the reasons why what you are trying to do is not possible with Zurb Foundation 3/4. If you solve the problem, it would be great if you sent back your solution, as many other people would like to do something similar.

Answer 2

Here's 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;} 

Make sure it overrides CSS Foundations by placing it after Foundation CSS.

In HTML, I removed the left or right class.

The above information may violate the mobile version. To fix this place, this CSS is below the CSS above:

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

Also, classes may change depending on the version of Foundation that requires changing the CSS classes used above.

Answer 3

Here is the best solution I have found that works for all resizing. It centers the elements of the 5 upper beams.

Note that the keep-to-grid div will maintain the width of the top-level navigator within the website, but will not actually center the navigation elements.

The code used below.

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 am well versed in the question, I see that many of them explain that he needs to change css.

It can also use the Foundation class: contain-to-grid

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

Expected: http://jsfiddle.net/gRtrX/37/ (size before receiving the result)

It really looks 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--------------------------------------------------------------------------+ | | | | ˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜