Using The Built-In Divi Mega Menu
How To Add a Mega Menu To Divi Without Plugins
I think at the time of this writing there are at least 4 3rd party plugin developers with a mega menu solution for Divi. That’s fine and well, but did you know that Divi already comes with a mega menu built-in? That’s right, you can create mega menus with Divi without any plugins! Let’s show you how!
▶️ Please watch the video above to get all the exciting details! 👆
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.
Here’s how that looks by default. The parent menu item has four submenu items under it.
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.
Here’s how it looks now that we added the “mega-menu” CSS class to the parent menu item:
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.
Here’s how your Divi mega menu looks!
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
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.
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.
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.
Thank you so much for your instructions! I had no idea about the “secret classes” built in, and it makes me want to explore that avenue more. Do you have any resource suggestions for these classes that are already there?
You’re welcome! I don’t think I have any other resources on it, it’s just this one about mega menu that I am familiar with.
Hi Nelson Is its better to create the menu in theme builder using the menu module or set up the menu vi the theme customiser thanks another enjoyable tutorial
Hi Wallace,
I guess that answer is “it depend” but my personal recommendation is to avoid the customizer and use the Theme Builder as much as possible since that is the future of Divi, so may as well get used to doing it that way.
Hi John,
It’s impossible to help without a link. If you provide one maybe I or someone else will be able to check some of these things.