Header Navigation Item Width/Multiple Lines

Hi Andrew

I would try the following, assuming you are using the bottom nav area:

– within Appearance > Menus in your main menu, open the screen options tab at the top of the screen.

– check the option for showing advanced menu properties CSS Classes

– toggle open each menu item and add unique names to each menu item, eg. menu-investment-banking

– save your menu

Then by whichever CSS method you use, something like the following might be a good start. An issue is that the widths will be fixed, and you’ll have to set it for each instance of the forced smaller widths, by duplicating the last declaration block of the code below for each new double-lined list item:

#header_main_alternate.container_wrap,

#header_main_alternate.container_wrap .container,

.menu-main-menu-container,

ul#menu-main-menu {

height: 40px!important;

}



ul#menu-main-menu>li,

ul#menu-main-menu>li>a {

height: 40px!important;

line-height: 40px!important;/*change this line-height to suit the single word nav - smaller number will raise it upward */

}



ul#menu-main-menu>li.menu-travel-management > a {

width: 100px!important;

line-height: 16px!important;

padding-top: 4px!important;

height: 40px!important;

}

cheers

Darryl