Variable / Flexible Width Menu Items
Only compatible with modern browsers.
In the demo below the menu items automatically adjust their width to fill the menu bar.
Try resizing your browser to see how the width of the menu items adapt as the menu width changes.
Allowing Menu Items to Expand to fill the width of the menu
Step 1
Under Mega Menu > Menu Themes > Menu Bar > Top Level Menu Items > Menu Item Padding, make sure the left and right padding options are set to a sensible value (e.g. no more than 10px).
Step 2
Go to Mega Menu > Menu Themes > Custom Styling and insert the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@include desktop { #{$wrap} #{$menu} { display: flex; > li.mega-menu-item { flex: 1 1 auto; /** Do not grow menu items with ".mega-no-flex" class **/ &.mega-no-flex { flex: 0 0 auto; > a.mega-menu-link > img.mega-menu-logo { max-width: none; } } /** Center align text within menu item **/ > a.mega-menu-link { text-align: center; white-space: nowrap; > span.mega-indicator { float: none; } } } } } |
Preventing certain items from expanding
In the demo menu above, only the textual items expand – the WordPress icon and the Search icon do not expand.
To prevent a menu item expanding, go to Appearance > Menus.
Click “Screen Options” at the top and make sure “CSS Classes” is checked.
Next, open the settings for the menu item and add “no-flex” as a Custom Class:
Save the menu.