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:

‘ere 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.

What a is a Divi Mega Menu?

When planning a large website with numerous categories and subcategories, a Mega Menu can help improve user experience. In plain English, a Mega Menu is a drop-down menu that lets you pack your entire website’s interface into a single menu which can help your visitors reach even the deepest portions of your website through the Divi Menu.

Besides improving the user experience and website functionality, Divi Mega Menus can also contribute to an increase in revenue, conversions, and the amount of time customers spend on your site.

So how can you create a Mega Menu on your Divi site? Let’s take a look!

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

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 Create a Divi Mega Menu with a Plugin (Divi Mega Menu)

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

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

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 😁

Conclusion

Stay awesome folks!