Creating a mega menu can be useful if you have a large number of items or sub-menus to present to your visitors to orient them to your site.
A mega menu is a menu composed of several categories or columns and possibly embellished with images or icons. They are particularly used on online sales sites offering many products for example.
Many plugins offer this feature. We have chosen to introduce the DiviEngine Divi Mega Menu plugin which allows you to create a mega menu directly with the Divi Builder using all native Divi modules.
Be aware that if you want a very simple and standard mega menu, it is possible to add one without having to use a plugin.
Add a mega menu to Divi without plugin
Let's say you are using a menu with several sub-menus and more sub-menus, so something like this:
We agree it's a big menu, but it can happen. On the front-end, it gives us this:
The visitor's navigation can therefore quickly become complicated and he may have difficulty finding the information he is looking for.
Lucky for us, Divi's got it covered. The theme natively embeds the ability to create a simple mega menu without entering the code.
To set it up, just add the CSS class mega-menu to the menu you want. Here for example I will apply this class to menu item 1.
On the menu administration page in WordPress, click the Options button on the top right hand side of the screen and check the CSS Classes checkbox:
A new box to fill in now appears on our menu items.
Open the menu you want to turn into a mega-menu and assign it the CSS class mega-menu as shown here :
Save and return to your menu on the site. You now have a mega menu ready to use:
If you want to improve the design, take a look at our tutorial to add icons to the menu and add some CSS to polish it up.
Adding a DiviEngine Mega Menu with DiviEngine's Divi Mega Menu extension
Divi Mega Menu is an extension developed by DiviEngine, who are also the creators of BodyCommerce that I quoted in my article Customize your WooCommerce pages with the Divi Builder.
It is sold from £7 for use on one site and up to £35 for unlimited use.
It allows you to create your mega menu using all the Divi modules, but also the layout using sections or lines.
Once Divi Mega Menu is installed and activated, a new Divi Engine tab appears in the WordPress administration. You will find there all the settings related to the plugin.
First you have the possibility to make the mobile menu fixed via the options, but be aware that the mega menu will also be fixed and will use 70% of the screen height if you check this option:
Now let's move on to the creation of our mega menu. Click Divi Engine -> Divi Mega Menu to display a list of your mega menus.
You don't have one yet, and that's normal, but you can use it later.
Click Add New at the top to create the first one and activate the Divi Builder.
So here we are in the creation interface :
I'll give you a quick description of the right sidebar options:
- Custom Identifier (css class) : here you will have to define a CSS class of your choice, without . in front and containing only letters. This class will then be reused in the menu Appearance -> Menu to define the item on which the mega menu will be injected (in the same way as when we added the CSS class of Divi above to create a simple mega menu).
- Animation Menu: Here you can choose between six animation effects for the mega menu to appear when the visitor clicks on it (appearance from the right of the screen, left, top or bottom, or horizontal or vertical flip effect).
- Animation Duration: you can define the duration of the animation you chose just before. I advise you not to take more than a second not to irritate your visitors.
- Custom Width: this option allows you to define the width of your menu. Adapt this value according to the modules you want to display or leave the default value.
For the rest, this is the classic Builder you are used to.
Two columns, Text, Images and Buttons modules. It's standard stuff...
Note the class I have assigned to my menu on the right: the CSS mega class.
Let's now go back to Appearance -> Menus to assign this CSS class to the menu we want to turn into a mega menu. Here it will be the Menu 6 tab:
And here's the result:
Admit that the result is rather nice and highlights the different plugins here. Of course, you can use all other Divi modules and create much more complex layouts.
You can also add them to any menu you want in the same way, but be careful not to make your menu too flashy for your visitors.
Creating a mega menu with a minimum of design is never easy.
If your site requires one, the use of the CSS mega-menu class provided by Divi may be enough for you but the menu will not be easy to customize for the uninitiated.
Divi Mega Menu is an easy to implement plugin for a rather affordable price, and even if it requires the use of one or more CSS classes (depending on your number of mega menus), you won't need any specific knowledge to use it fully.
And you, do you use mega menus on your site? In what case? Tell us all about it.