If you want to make your menu items expand the full width of the menu bar, you can do so with some custom CSS. Basically, we’ll just set each top level menu item to be the same percentage of the bar.
Before:
After:
Once you know your total number of top level menu items, just divide 100 by that number to get the proper percentage:
| Number of Items (n) | Percentage (100/n) |
|---|---|
| 2 | 50% |
| 3 | 33% |
| 4 | 25% |
| 5 | 20% |
| 6 | 16% |
| 7 | 14% |
| 8 | 12% |
| 9 | 11% |
| 10 | 10% |
So, for a menu with 5 top level menu items, we’d use this CSS:
#megaMenu ul.megaMenu > li.menu-item{
width:20%;
text-align:center;
}
See also Adding Custom CSS
Using Percentages
As you’ll notice, for numbers of menu items that don’t divide evenly into 100, there will be left over percentages (for example, with 3 menu items × 33%, your menu items will fill 99% of the menu bar, leaving 1% at the end of the menu bar). Generally this is not noticeable. It is recommended that you round down to the nearest whole percent as different browsers use different rules to round percentages, and if you end up off by a pixel due to browser rounding, your last menu item will appear on the next line. That is, rather than 33.3333%, we use 33%, and rather than 16.666% we use 16%. While some browsers handle conversions from percentages to pixels intelligently, others do not. Remember, you can’t have a fraction of a pixel.
Text fit
Normally, UberMenu’s menu items size naturally to their contents. That is, if you have an item with a long label like “Contact us for special deals”, this will all appear on one line and you’ll have a wide menu item.
Once you make all your menu items the same size, this may force some of your longer text items to wrap. While the menu will still function perfectly, it may not look as nice.
All items 16%
If you really want to hone your menu, you can assign a different width to each menu item so that they add up to 100% – they don’t all have to be a constant width. For example, if your second menu item is too long and you want your 5 items to expand full width, you might use a distribution of 15,40,15,15,15 instead of 20,20,20,20,20. Essentially taking 5% from each of the other 4 items and giving it to the second item. Here is how you can target individual menu items.
Each item’s width tweaked manually for better fit:
Other Notes
Please note that these changes are customizations, and there are a variety of situation-specific issues you may encounter which you will need to resolve with custom CSS. Here are a few tips to point you in the right direction:
Image position
If you are using an image and want it to appear centered with the text rather than at the edge of the menu item, you can try something like this
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-with-img img{
display:inline;
float:none;
vertical-align:top;
}
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-with-img span.wpmega-link-title{
display:inline;
padding-left:10px;
}
Submenu Indicator Arrow Position
It won’t be possible to move the arrows closer to the text in a flexible way. You could change their `right` position value, but this may change if your site width adjusts with the viewport (is responsive), so that is not a general solution. You could move the submenu indicator from the anchor to the span.wpmega-link-title element instead to achieve this effect, but that customization is outside of the scope of this tutorial or product support.