How to create a custom Mega Menu template

Who is this article for?

Anyone who owns the 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 Appearence > 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 createing 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.


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.


Still need help? Contact Us Contact Us