How To Build A Products Menu - Demo
Written by the Divi Engine Documentation Team
Introduction
Follow these steps to build the Products Mega Menu on our demo site. Click HERE to see the demo page.
Preview
Description
How to create the product Mega Menu on our demo website.
Difficulty
Easy.
Time
15 Minutes.
Step 1: Set It Up - Divi Mega Menu
Head over to Divi Engine > Mega Menu and create a new Mega Menu.
Section Settings
Spacing:
Left, Right, Bottom and Top: 0px.
Border Radius:
Left, Right, Bottom and Top: 8px.
Row Settings
Spacing:
Left, Right, Bottom and Top: 25px.
Sizing:
Width: 100%.
Max Width: 100%.
- Add a heading to your Mega Menu.
- Make sure there is a unique ID, different from all other Mega Menus you create.
- Add 5 Blurb modules.
- Add the Title and Body Text.
For each Blurb customize the appearance of the header to have the colors you want. As you can see above we have changed the title text color to purple.
Blurb Settings
Title Heading Level:
H3
Title Font:
Lato
Title Font Weight:
Bold
Title Text Color:
#8f42ec (purple)
Step 2: Customize Our Settings - Divi Mega Menu
Customize the Mega Menu Settings to what you want - but below are the important ones to use/follow to get this style. For more information, please visit our documentation to your left.
- Default Mega Menu (not tooltip).
- Hover appearance.
- Fade in menu animation.
- Not fullwidth.
- 450px custom width.
- Position relative to the Mega Menu.
- Position the menu top and left.
- Triangle above Mega Menu.
- Triangle location on the Mega Menu.
- Triangle colour as #ffffff.
- Triangle height as 20px.
Step 4: Add Custom Code
No custom code here.
Step 5: Conclusion
Save your Mega Menu and make sure that you activate it through your WordPress Menu as we instruct in the step by step guide.
- Go to Appearance > Menus.
- Add the unique identifier that you added to your Mega Menu as the CSS class.
More Support?
Please email us at [email protected] if you are unable to get Divi Mega Menu working.