How to create a custom Mega Menu template
Who is this article for?
Anyone who owns Divi Den Pro and wants to know how to create a custom Mega Menu template.
See how to create other templates here: Create your own custom Divi Theme templates
• Skill level: Easy
• Time to complete: 5+ minutes
Video Tutorial
Creating the template
1. Go to Appearance > Menus and create a new menu.
Give your menu a name and create menu items.
For this tutorial, I'm going to create "News Mega Menu" and going to add these menu items: Sport, Economy, Science.
2. Go to Pages > Add New to create a new page:
- You need to add a fullwidth section with a fullwidth menu module. From the fullwidth menu module settings, choose the menu you just created.
- Create a section for each menu item. I'm creating three, one for the Sport menu item, one for the Economy and the last one for the Science.
Add any content for these 3 sections you've created.
3. ID's and Classes
Fullwidth menu section needs to have this class assigned: ddp_mega_menu
Other sections need to have this class:ddp_mega_menu_item and a unique ID each. I'm just going to add the id 'sport' for the Sport menu item section, 'economy' for the Economy and 'science' for the Science.
4. Now your layout is ready.
Click the Page settings, and then choose the "Save To Library" button.
Give your layout any name, such as "News Mega Menu template".
Add the layout to two categories: PHP template and Mega Menu.
If you don't have these categories, create them manually first, or, save a premade item and the categories will be automatically created.
5. Now go back to the menu (Apperance .> Menus)
Toggle a menu item and for the CSS Class, match the ID of the respective section.
If you don't see the "CSS Classes" field, toggle Screen settings and enable it.
Repeat the process for each menu item.
6. Finally, go to Divi Den Pro > Theme Builder.
Click WordPress Customizer, toggle Divi Den Pro, then toggle Global navigation menus.
From the dropdown menu, select the menu you've just created and hit the Publish button.
