How To Build A Products Menu - Demo

Written by the Divi Engine Documentation Team


Follow these steps to build the Products Mega Menu on our demo site. Click HERE to see the demo page.



How to create the product Mega Menu on our demo website.




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

Left, Right, Bottom and Top: 0px.

Border Radius:
Left, Right, Bottom and Top: 8px.

Row Settings

Left, Right, Bottom and Top: 25px.

Width: 100%.
Max Width: 100%.

  1. Add a heading to your Mega Menu.
  2. Make sure there is a unique ID, different from all other Mega Menus you create.
  3. Add 5 Blurb modules.
  4. 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:

Title Font:

Title Font Weight:

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.

  1. Default Mega Menu (not tooltip).
  2. Hover appearance.
  3. Fade in menu animation.
  4. Not fullwidth.
  5. 450px custom width.
  6. Position relative to the Mega Menu.
  7. Position the menu top and left.

  1. Triangle above Mega Menu.
  2. Triangle location on the Mega Menu.
  3. Triangle colour as #ffffff.
  4. 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.

  1. Go to Appearance > Menus.
  2. 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.