COMPLEXITY

Easy

TIME

10 Minutes

ASSUMPTIONS

  • Basic knowledge on Divi
  • Divi and Mega Menu are already installed and configured

 

VERSIONS

Divi 4.9.4
Divi Mega Menu 3.1

Mega Menus on Divi WordPress sites are a big trend in modern web design and you’ve definitely seen them when shopping online without even realizing it. Online stores lite like Amazon and Starbucks heavily implement it to help users like us navigate through what could have been massively confusing menus. So, to that point, you might be asking yourself “What is a Mega Menu?”. Mega Menus are a great way to avoid clutter when you have a long list of subpages and menus. Often the goal with a Mega Menu is to represent the options visually for things like categories which will reveal more options when hovered or clicked on. This creates a much better user experience by limiting their frustration in getting to those awesome products you or your clients might want them to buy.

Check out this example:

Evernote Mega Menu example for Divi WordPress

Here we can see the Evernote website including two Mega Menu layouts that look great. Navigating the features and pricing is an absolute breeze and you can easily incorporate one into your Divi WordPress site, but before we get to that, let’s look at some of the benefits of using a Mega Menu on your Divi WordPress site.

When to use a Mega Menu in your Divi WordPress site

There are two types of sites that greatly benefit from using Mega Menus, they are eCommerce sites and blog or news sites. The reason is that these types of sites usually have Depp catalogs of content and products that need to be easy to navigate. Using Mega Menus gives them a very visual and natural-feeling way to navigate through the different layers of the menu instead of flooding the screen with a bunch of text links. Mega Menus might even increase your SEO indexing as it adds more links to relevant content for your visitors.

When not to use a Mega Menu in your Divi WordPress site

While Mega Menus are fantastic, they don’t always work very well on smaller screen sizes which may just frustrate your users. Also, outside of a few examples like pricing tables, smaller sets of content or products might not work that great in a Mega Menu. Long menu links will also create an unpleasant experience for your visitors with text wrapping weird and the screen just being populated with a bunch of text.

How to add a Mega Menu to your Divi WordPress site

Now for the good stuff, let’s look at how we can add a Mega Menu to our Divi WordPress sites. Depending on your skill level, you can add a Mega Menu to your site with either some code utilizing some HTML and CSS code, or you can use a 3rd party plugin to get one up and running chop-chop.

Custom Code

If you’re a skilled coder you can easily add a Mega Menu to your Divi WordPress site. Alternatively, you can hire a code ninja to get the job done for you. The downside to this is that it can be expensive. You can check out this guide that covers how to code a Mega Menu from scratch.

3rd Party Plugin

Now if you’re like me and don’t have the time, money, or skill, you can use a 3rd Party Plugin to add that Mega Menu to your Divi WordPress site. Not all plugins are created equal, but you can usually find a decent option for around $30 and it will have you up and running very quickly. The downside here is that your options can be fairly limited, especially since some of these plugins don’t integrate too great with the Divi Theme.

Divi Mega Menu

Then there is our custom solution for adding a Mega Menu to your Divi WordPress site. At right around $11 you are getting just shy of a custom-coded experience. Why? Because this plugin uses the Divi Builder to build out your Mega Menus. This is awesome because you enjoy the flexibility of styling options in line with what is offered by the Divi Theme. We even went a bit further and added some additional custom options like overlays to highlight your Mega Menu.

Let me show you how quickly you can add a gorgeous Mega Menu to your Divi WordPress site using Divi Mega Menu.

Preview:

How to add a Mega Menu to Divi WordPress site

Adding a Mega Menu with Divi Mega Menu

It is showtime! Check out the video below on how to add a Mega Menu to your Divi WordPress site with Divi Mega Menu. Alternatively, you can check out the text instructions at the bottom.

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.

Step 1) Create a New Mega Menu and Add First Row with Links

Go to Divi Engine > Mega Menu > Add New

Give it a descriptive name and prepend “mm_” to the generated Unique Identifier.

Enable the Divi Builder > Build from Scratch > Add 3 Column Row > Add Blurb Module

Blurb Module 1

Content Tab

Text

Title: “Phones”

Image & Icon

Use Icon: YES
Icon: Mobile Phone

Background

Hover Color: #0fe5a8

Design Tab

Image & Icon

Icon Color: White
Circle Icon: YES
Circle Color: #5430ce

Title Text

Title Font: Poppins
Title Text Alignment: Centered
Title Text Color: #5430ce / White (Hover)

Spacing

Padding Top/Bottom: 25px

SAVE your module, then make 2 copies, and drag a copy into each Column in the Row.

Blurb Module 2

Content Tab

Text

Title: “Tablets”

Image & Icon

Use Icon: YES
Icon: Tablet

Blurb Module 3

Content Tab

Text

Title: “Laptops”

Image & Icon

Use Icon: YES
Icon: Laptop

Row Settings

Content Tab

Background

Background Color: #f7f7f7

Design Tab

Sizing

Use Custom Gutter Width: YES
Gutter Width: 1

Spacing

Padding Top/Bottom: 0px

Step 2) Add a Promo Bar Row

Add Single Column Row > Add Text Module

Text Module

Content Tab

Text

Body: “Free Shipping on all orders over $125!”

Design Tab

Text

Text Font: Poppins
Text Font Weight: Ultra Bold
Text Color: White
Text Shadow: Option 1
Text Alignment: Centered

Spacing

Padding Top/Bottom: 25px

Row Settings

Content Tab

Background

Background Image: Keyboard

Section Settings

Content Tab

Background

Background Color: Transparent

Design Tab

Spacing

Margin: 0px
Padding: 0px

All Done…well…almost, one more step

Step 3) Mega Menu Specific Settings

Scroll past the Divi Builder to the Mega Menu Style Settings.

Full Width: YES
Disable on Mobile: YES

Copy your Mega Menu Custom Identifier to the clipboard.

Go to Appearance > Menus

Either select your Primary Menu or create one and assign it as the Primary Menu.

Screen Options > Check CSS Classes

Add a Custom Link

URL: #
Navigation Label: “Products”
CSS Class: Paste your Unique Identifier from the clipboard

All Done! For real this time 😁

Divi Mega Menu All Done

Conclusion

So as you can see, Mega Menus are a great way to add some depth and class to your sites as well as help your visitors get to the content they want as quickly as possible. We covered why you might want to add a Mega Menu to your Divi WordPress site as well as some ways to get it done ranging from slightly complicated, to slightly expensive, to our awesome in-house solution! We hope this was helpful and if you have any questions on how to add a Mega Menu to your Divi WordPress site, be sure to drop a comment below.

Stay awesome folks!