Variable / Flexible Width Menu Items

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:

Stopping 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 stop 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.

Related Articles