Centering sub menus

In this article we will explain how to center a “mega” sub menu beneath the menu bar.

By default, sub menus are 100% wide, meaning they will span the full width of the menu bar. If you have center aligned your top level menu items then it may look as if the sub menu ‘sticks out’ from either side of the menu.

sub-menu-width-1

To center the sub menu beneath the menu bar, we first need to reduce it’s width.

Go to Mega Menu > Menu Themes. Set the “Panel Width (Outer)” setting to 80%.

The menu will now be 80% of the width of the menu bar, but it will be aligned to the left of the menu, as so:

sub-menu-width-2

To center align the sub menu we need to nudge it to the right 10%. To do that, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

End Result

The sub menu is centered beneath the menu bar.

sub-menu-width-3

 

Related Articles