Code by Day | Explore By Weekend

How To Create A Divi Mega Menu (Without Plugins) Tutorial by Pee-Aye Creative

How To Create A Divi Mega Menu (Without Plugins)

Learn how to create a Divi mega menu without plugins and how to style and customize the design of the mega menu with CSS.

What Is A Divi Mega Menu?

When a normal Divi menu item has additional menu items underneath it, we call those sub-items a submenu. So think of a mega menu as a set of multiple submenus side by side. We can create a mega menu by setting up our menu in such a way that it has multiple sets of menu item tiers. This is useful when we have a lot of items to put in our menu, or we just want to nest certain pages or sets of pages in a specific way. You can also use a mega menu to advertise products, featured services, or blog posts.

We wrote all about how to style the Divi submenu in a recent tutorial, so go check that out. It will definitely help you understand and style the mega menu!

Set Up The WordPress Menu

Creating mega menu in Divi starts with setting up the WordPress navigation. You can add whatever menu items you want, that’s not important. The important part is that you set it up in the correct order of hierarchy.

Setting up your Divi mega menu navigation

Here’s how that looks by default. The parent menu item has four submenu items under it.

how to make a Divi mega menu without plugins

Add The Mega Menu CSS Class

This is how the standard menu works, but in order to create a mega menu, we need to add as secret CSS class to the parent item.

NOTE: Be sure you have “CSS Classes” checked under “Screen Options” in the upper right corner of your admin screen.

add mega menu css clas to Divi menu

Here’s how it looks now that we added the “mega-menu” CSS class to the parent menu item:

preview of the Divi mega menu creation in progress

Add Additional Submenu Items

Next, proceed to add all your submenu items underneath each “column.” You can add as many as you need. In my example, I added three under each column.

structure of the menu items for the Divi mega menu

Here’s how your Divi mega menu looks! 

how to creat a Divi mega menu

How To Style The Divi Mega Menu

Now that we have created our Divi mega menu, we need to customize how it looks. To do this, we need to use CSS since there are no built-in settings for this in Divi. The cool part is that we can base our CSS off of our Divi submenu tutorial since many of the classes are the same.

  • Unordered List
  • List Item
  • Link

This still holds true! The only difference now is that each of the submenu list items now have an unordered list underneath them.

How To Customize And Style The Divi Mega Menu Submenu

You can do some things in the module settings, such as the background color. But to do anything beyond that, you can use our snippets and suggestions shown below to style and customize the Divi mega menu submenu.

How To style the Divi Mega menu

Edit The Overall Mega Menu

This would be exactly like our submenu tutorial, but remember, we added the class “mega-menu” to the list item.

/*edit the Divi mega menu*/
.et_pb_menu li.mega-menu ul {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style overall mega menu submenu. You can choose to do this by placing the snippets shown below into the selector for the mega menu shown above.

Add a border:

border: 2px solid #2cba6c;

Make the corners rounded:

border-radius: 10px;

Adjust the spacing:

padding: 0px;

How To Customize And Style The Divi Mega Menu Submenu First Row

The next thing you may want to customize and style with the Divi mega menu is the first row. You don’t have to do this separately than the other list items, but it often works out well. You can see our site menu for an example of this in action.

How To style the first row of the Divi Mega menu

Edit The Mega Menu Submenu First Row

To do this, we are taking the CSS class for all the menu list items and adding a new special pseudo class called “first-child” which only targets the list items in the top row.

/*edit the Divi mega menu submenu first row*/
.et_pb_menu li.mega-menu > ul > li > a:first-child {
YOUR CSS HERE
}

Edit The Mega Menu Submenu First Row On Hover

/*edit the Divi mega menu submenu first row on hover*/
.et_pb_menu li.mega-menu > ul > li > a:first-child:hover {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style the first row of mega menu submenu list items. You can choose to do this by placing the snippets shown below into the selector for the mega menu shown above.

Add a border:

border-bottom: 2px solid #2cba6c;

Change the background size:

background-color: #2cba6c;

Change the text color:

color: #ffffff;

Change the text size:

font-size: 24px;

Adjust the font weight:

font-weight: bold;

How To Customize And Style The Divi Mega Menu Submenu List Items

You may be wondering why the tutorial ends here? That’s because we’ve already covered how to style and customize the Divi submenu in our other tutorial (that we keep talking about), so we don’t need duplicate content. You can now go and use that tutorial for anything related to the list items and links, and they will work perfectly here in the Divi mega menu.

You may also want to add images to your mega menu. You can do that with another tutorial about adding images to the Divi menu.

42
Last updated Jan 3, 2021 @ 1:05 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
28 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Thomas
10 months ago

Thx for this very good tutorial! I would like to see something for the mobile menu with nested childs? Is ther something existimg i could use?
Best Regards,
Thomas

Guillermo
Guillermo
10 months ago

Thank’s Nelson, great video.

Regards

Jenn
Jenn
10 months ago

This is great! CSS is not my strong point, so I really appreciate the explanation to understand what each code piece does so I can change what I need to change to make it look how I want it to look on my site, instead of just following a tutorial to make it look just like ‘yours’.

Shahzad Raza
10 months ago

Thank’s Nelson for writing useful content on Mega Menu.

La Chacra
9 months ago

Not sure what I am doing wrong but I do not see the “mega menu” option under: Menu settings>Content
The only options are to select a menu. was this option removed or relocated. I am running the latest version of Divi (4.4.2)

Vikas
7 months ago

Hello Nelson,

Thanks for the above. I am a non technical person.

I got the CSS snippets etc but I do not understand where shall I add them.

Like for example.. I am going to Appearance- Menus- CSS Class… do I add these there?

As I can not think of any page which opens the menus module here.

By the way, I do have an existing mega menu but not customized.

Appreciated.

Snake
Snake
7 months ago

Hi,
 
I couldn’t get this to work using .et_pb_menu as this class doesn’t seem to exist.
 
I have used #top-menu instead, which is working.
 
However, I just cannot get the hover settings to change.
 
this works
 
#top-menu .mega-menu ul li a {
background-color:#BD282A!important;
color:white;
}
 
but this doesn’t
 
#top-menu .mega-menu ul li a:hover {
background-color:#BD282A!important;
color:white;
}
 
any idea why?
yes I have cleared my server cache, and browser cache.
 

Segun
Segun
6 months ago

Thanks for this great tutoria. i really like the way you explained it step by step. But is there a way to make the mega menu parent items displayed vertically while the sub-menu display in horizontal manner. Like the one in this picture?

Screenshot (87).png
Last edited 6 months ago by Segun
Kevin
Kevin
4 months ago

Hey Nelson. Thank you for the tutorial. Very helpful. I’m wondering if there’s a way to make it display more than 4 columns? I have a five column menu and the fifth column wraps to column 1.

Kaos Polos
4 months ago

Thankyou Nelson,

Can we create mega menu like this (attached)

So, when we hovering menu, they show content of that category

Example, I have a blog, my menu is like this:

HOME
Health (category)
Auto (category)
Lifestyle (category)

When I hovered Health, they will show newest (or randomly) post from health Category. Can we?

MEGA MENU.png
Ian Knight
Ian Knight
1 month ago

Hi Nelson, I found these menu tutorials to be quite helpful, and it’s changed the way I create my menus and style them. So thanks for that. I have a question about the styling of the Mega Menu when I only want to use two columns. Normally the MM is set up for 4 columns, so when only 2 are used, they stretch to fill the space of 4 columns. Is there a way to reduce the width of the MM so that it doesn’t stretch the entire width of the page? I think that’s the default design, but it… Read more »

Ian Knight
Ian Knight

Oops. Check again? I’ve shut that off.

Ian Knight
Ian Knight

Hi Nelson,
I turned off the right-click block last week, after your comment. Have you had a chance to look?

Francesco schinaia
Francesco schinaia
1 month ago

Hi Nelson!
the MM you show becomes all HTML? I’m reading that many MM made with plugins give problems with seo and that it is better to build them all in HTML .. the one of DIVI I think is good. http://www.etc14.eu

Is there in DIVI a way to add a third level and collapse the second level voices?
similar at the mobile menus I mean ..?

Best Regards
Francesco

Francesco schinaia
Francesco schinaia

hello I hope to be able to explain. I know that Google does not like menus and megamenus made with javascript, and prefers html menus, lists (ul li) to be read immediately and not to be understood after rendering all the js. I was wondering if the megamenu created with DIVI was read immediately by google or not .. The Megamenu done with DIVI is very simple and has limitations for me. I tried to use a plugin to build Megamenu but I see that it inserts some code using :AFTER elements .. So if the DIVI Megamenu is good… Read more »

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart