Step 3: Create A Mega Menu
Written by the Divi Engine Documentation Team
Watch This Video
Introduction
Follow this information to create a Mega Menu.
Go To Mega Menu
Click on Mega Menu in the Divi Engine section on the left-hand side of your wp-admin dashboard.
Create A New Mega Menu
Create a new Mega Menu by clicking the Add New button. Follow the steps below to create your first Mega Menu and repeat these steps to create more.
Add A Name & Identifier
Your Mega Menu needs a name and custom identifier. In the example below the Mega Menu's name is Menu 1 and the identifier is menu_one. Please know that you must only use letters and the "_" sign in the custom identifier.
Select The Default Template Option
The pages of your Divi website need to be assigned to the Default Template option. To do this please make your way to the pages of your website and ensure each page is set to the Default Template option found in the Page Attributes section.
Where?
At this point, you need to decide where you want to position this Mega Menu. Divi Mega Menu has two options: the default WordPress menu or any Divi module such as a button. While this is the case, Mega Menu was built to align itself with the default WordPress menu and so we recommend that you position Mega Menu with the default WordPress menu.
WordPress Default Menu
To assign this Mega Menu to a default WordPress menu, make your way to the Menus section in the wp-admin dashboard. There you will create a menu using the pages of your website and add your custom identifier.
Step 1: Build A Menu
Step 2: Add A Custom Identifier
After creating your menu you will need to add the custom identifier to the parent menu item that you want your Mega Menu to work with. To do this open up the Screen Options area at the top of the page and check the box titled CSS Classes. Checking this box will enable you to add the custom identifier into the input field called CSS Classes (Optional) seen in the image below. Add your identifier and click the Save button.
Step 3: Select Your Navigational Header
The Default WordPress Menu can be set to display in a number of ways such as the Theme Builder. Head over the Divi Engine > Mega Menu Settings and select the Navigational Header of your choice.
Divi Module (Popup/Tooltip)
To assign this Mega Menu to any Divi module such as a button, make your way to the place on your Divi website where you would like the Divi module. Add the module and style it accordingly.
Step 1: Add A Custom Identifier
After creating your button (or another module) you will need to add the custom identifier for this Mega Menu to the module. To do this click on the Advanced tab and then add the custom identifier into the CSS Class input field.
Build A Mega Menu
Make your way back to the Mega Menu section and find your menu. Use the Divi Builder to build your menu by adding modules, styling them as you go. The image below shows the building of a Mega Menu to appear when a customer clicks the About menu item as seen in the image above. Divi Mega Menu does this by using the menu_one custom identifier added to the About menu item. After you are done click the Save button and view your menu on the front end.
More Support?
Please email us at [email protected] if you are unable to get Divi Mega Menu working.