Using The Mega Menu

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.
To see how to build a simple Mega Menu in Avada, please see the 『 How To Use Mega Menus In Avada』 video directly below, or to see how the Mega Menu was configured for the University demo, as shown above, see the video below that, 『How To Configure Menus in Avada』.
How To Create A Mega MenuStep 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.
NOTE: Only first level menu items have the Fusion Mega Menu option.
Step 3 – Enable Fusion Mega Menu (image directly after these steps). For the mega menu to show, the enabled first level menu item must have sub-menu items.
Step 4. 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. Further width options can be found in the Fusion Theme Options under Menu > Mega Menu. You can find more information on the Mega Menu』s various width settings here.
Step 5 – Set the 『Mega Menu Number of Columns』 option that will determine how many columns will be displayed. Auto is the default setting, and this will auto detect how many sub menu items you have, but you can also manually control this. For example, if you had 6 sub menu items, you could choose 3 Columns here, which would then create two rows with 3 columns in each.
Step 6 – 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 7 – Second Level menu items will display as a title for columns. To add a Second Level item inside the Mega Menu, select a link on the left hand side of your Menu page, 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 8 – 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 9 – 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 10 – 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 11 – Once finished, click the 「Save Menu」 button to save your changes made to the menu.
Mega Menu Interface Overview