How to create a Mega Menu in the Avada Theme for WordPress

In this blog we have talked about how to add a Max Mega Menu when we use Divi, the best free WordPress plugins to implement mega menus on our website, but today we will talk about a Mega Menu whose procedure is slightly different from other themes as Divi.

Today we will create a Mega Menu in the Avada theme.

Why do we sometimes decide to use a Mega menu? It happens that some web pages need to include subsections and elements that are more dynamic for users, such as icons, images, or expand the menu view. So today we will use the mega menu for Avada, one of the simplest, customizable and prestigious WordPress themes. The editor of this theme, in addition, is quite versatile and easy to use, so… Let’s do it!

1. Create and locate the menu

In the theme options, in the Advanced tab, verify that the Mega Menu option is not disabled. If so, activate it and save the changes.

If it is not created yet, you must create a menu and place it in the main menu area on your web page. You should know that the mega menu appears below the parent menu or the main menu items.

Only within the items of the first level of the menu, we will see the option to activate or deactivate the Mega Menu Fusion option. To activate them, you must enter the options of Avada that will show the settings window.

You must enter Appearance, then the Menus section of your administrator and give your new menu a name. We must select the checkbox that says Main Navigation because only in this way we can implement the Mega Menu. Within this configuration, we can start to customize our menu.

2. Determine the elements of the Mega Menu

When creating and configuring the menu, we must enable it as a mega menu but this must be done element by element. We must enter each element that we want to go in the parent menu and select the checkbox that says Enable Fusion Mega Menu Only for the main menu. To these items, we will now add elements of the submenu in the form of Mega Menu.

Tip: Make sure that the Mega Menu full width option is unchecked in the checkbox so that the column width option of the Mega Menu appears.

Now we must open the options of each element of the submenus. There we will see that we can choose the percentage of the width of the column. These columns can be between 1 and 7 but you can keep the option of the number of columns automatic, and they can be full width or choose different widths for each column depending on the elements you want to place in them. Deactivate the title and determine the location of each item in the submenu. You will see it as a hierarchical list of elements that you can drag and drop. By clicking on the arrow of each element, you can access the individual settings.

On the left, you will see a list with all the pages that your website has. You can select each of the ones you want in the checkbox, click Add to the menu and use the drag and drop function to sort these items.
The difference in the functioning of the Mega Menu in Avada with respect to the others of which we have talked is that the way to place content in the second or third level submenus is through widgets, unlike other mega menus where we can simply place the text. This means that we have to create a widget area and then place it in the submenu item we want.

The above is not a disadvantage despite the difference in the process since the widgets area allows us to place images in it (remember to deactivate the title if you are going to place it) and texts. You can also place Font Awesome icons. Applies to second and third level menu items, as we mentioned before. The second level menu items will serve to show the title of the column, that is why we must remove the title when we add the third level.

The path to create these Widgets is first by clicking on Appearance and then on Widgets. We create a new area of widgets, we put a guide name to know what we will insert there or what element will belong. In it, we can place images or texts and we must do the same with all those that we need to integrate.
Then we go to an element of the submenu and in the Mega Menu Widget Area option, we choose the widget area that corresponds or that we want.

3. Put the style to it!

We already did the main thing: set up our entire menu with the elements we want you to have, but you will notice that it will look a little… Messy.

To finish looking good, we will use the full-width option. How? Easy: We must go back to the menu and click on the Full-Width Mega Menu option. With this, the menu will occupy the complete screen and will be more coherent and aesthetic because the elements will be centered and ordered better.

Bonus: We will always have a plugin.

Avada Mega Menu of Quadmenu is a plugin that will make an instant integration of a Mega Menu in your Avada theme. This implies that the style and layout configurations will be emulated instantaneously. The Pro version of Quadmenu also offers total integration with the personalization panel of your theme, change details such as colors and layout and view changes in real time, social network buttons, registration and login forms, tab menus ( tabs menu) and is totally responsive.

As you can see, the options to add a Mega Menu are quite extensive, however when we choose the ones that our theme offers, we can avoid installing more plugins and customize our website in the same way. The Avada Mega Menu also allows you to use CSS

We like to know your opinion, tell us if you like to use Mega Menus and under what modality do you prefer them: natively or with plugins? What theme do you use? What plugin do you prefer? Tell us!