Step 4: Create A Mega Menu
Remember to update or publish your work as you go. Follow the images below.
1.) Mega Menu.
Click on Mega Menu in the Divi Engine section on the left-hand side of your wp-admin dashboard.
2.) Add 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.
3.) 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.
4.) 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.
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. See below for more details.
5.) 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 as seen in the images below.
Add 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.
6.) 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.
Add 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.
7.) 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.