Mega Menus

A Mega Menu is the name given to a large panel of content which is displayed below a menu item when the user clicks or hovers over the menu item. Mega Menus can contain sub menu items and Widgets.

Each item in your menu will display a blue 'Mega Menu' button when hovered over. Clicking this button will launch a panel containing all of the Mega Menu settings for this menu item.

blue-mega-menu-button

Displaying Menu Items in a Mega Menu

By default, child menu items will be displayed in a dropdown (Flyout) menu on your site.

To convert a flyout menu to a Mega Menu, switch the Sub menu display mode from Flyout Menu to Mega Menu.

mega-menu-enable

If present, each child menu item (Mammals, Reptiles, Birds) will be displayed in the Mega Menu editor.

Each child/second level menu item can be expanded or contracted using the left and right arrows to take up more or less width of the mega menu.

Before (Flyout Menu)

Before (Flyout Menu)

After (Mega Menu)

After (Mega Menu)

Displaying Widgets in a Mega Menu

Select a widget to add to a Mega Menu using the selector at the top right of the Mega Menu editor. The widget selector will list all of the widgets installed on your WordPress site.

To edit a widget, click the down arrow on the right:

edit-widget

Drag and drop the widget to position it within the Mega Menu:

move-widget

The Result (displaying a Widget alongside Menu Items in a mega menu)

widget-after

Changing the number of columns

Mega Menus can be adjusted to show between 1 and 8 columns of content. Sub Menus and Widgets can span multiple columns. Each Mega Menu can be configured to use a different number of columns.

Use the drop down selector at the top right of the Mega Menu settings to change the number of columns:

columns

Next up: Flyout Menus

Related Articles