Using The Mega Menu

01/04/2019

Avada has a built-in mega menu that can be enabled on every First Level menu item in the Appearance > Menus tab. It can have 1-6 columns, span the full site width, have custom column width settings, display widgets, have icons or images next to menu items and more. Please see below for information on how to set the mega menu up. If you need information on how to create a regular menu, please read our Setting Up The Menu article here.

Mega Menu Example

How To Create A Mega Menu

Step 1 - Navigate to the Appearance > Menus section on your WordPress sidebar and select the 'Create A New Menu' link to create a new menu, or edit an existing one.

Step 2 - Choose the first level menu item that you wish to open a mega menu with. To enable the Fusion Mega Menu, click the Avada Menu Options button on your chosen menu item, which will launch the Avada menu settings window (image directly after these steps). NOTE: Only first level menu items have the Fusion Mega Menu option.

Step 3 - Enable Fusion Mega Menu. For the mega menu to show, the enabled first level menu item must have sub-menu items.

Step 4. Set the 'Mega Menu Number of Columns' option that will determine how many columns will be displayed. Also, check the 'Full Width Mega Menu' option if you want your mega menu to span the full site width as set in Avada > Theme Options > Layout > Site Width. You can find more information on the Mega Menu's various width settings here.

Step 5 - Each menu item can have a Font Awesome icon, or a custom image thumbnail along with the menu text. There are two separate options where you can select your icon or upload your custom image.

Step 6 - Second Level menu items will display as a title for columns. To add a Second Level item inside the Mega Menu, select a custom link on the left hand side and click the 'Add to Menu' button. To make it a Second Level menu item, drag the menu item below and to the right of the First Level menu item.

Step 7 - The Third Level menu items will be the smaller menu items in each column. To add a Third Level menu item, repeat step 5 above and drag and drop the new menu item below and to the right of the Second Level menu item.

Step 8 - Second & Third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create Widget Areas and how to add Widgets to it here. Once you're done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the "Mega Menu Widget Area" dropdown field. This option is only available when the Fusion Mega Menu option is enabled for the Parent menu item.

Step 9 - After setting up your menu, scroll down to the bottom of the page to the Menu Settings section. Check the 'Main Navigation' checkbox to assign your new menu as the main navigation. Please reference the image below for more details. Only the Main Navigation will display the Mega Menu.

Step 9 - Once finished, click the "Save Menu" button to save your changes made to the menu.

Mega Menu Interface Overview

Mega Menu Levels