Are you ready to build a beautiful Divi mega menu for your website?
With this How To Create a Divi Mega Menu guide, you’ll learn exactly how to create a powerful and engaging navigation for your site. This easy-to-follow tutorial will show you step-by-step how to design the perfect Divi mega menu that looks slick on desktop and mobile devices alike.
Imagine having the ability to curate content in an amazingly amazing interface – Your users will love it! Not only that but search engine bots too, as they are able to easily crawl through all of your content without any problems at all. That’s just one part of what this guide can do for you!
Table of Contents
- What is a mega menu in Divi?
- Method 1: Create the default mega menu in Divi
- Method 2: Create a mega menu with a FREE PLUGIN (advanced)
- Method 3: DiviMenus by DonDivi
- Method 4: Divi Mega Menu Pro by Divi Life
- Method 5: Divi Mega Menu by Divi Engine
- 5 examples of great-looking mega menus
I will start with an introduction but you can also just skip that and start right away with the tutorial.
What is a mega menu in Divi?
Mega Menus are a popular way for website developers to display many options in a single menu. Mega Menus allow an organized structure of categories and sub-categories that make it easier for the user to navigate through a website.
This type of menu usually appears as a dropdown bar across the header and can enlarge when clicked on or hovered over.
Mega Menus are typically used on corporate websites or other sites with multiple sections, due to their ability to quickly organize large amounts of information in an easy-to-understand manner. Ultimately, Mega Menus can provide quick navigation capabilities that empower users to find what they are looking for faster and more accurately.
When should you use a mega menu in Divi?
If your website offers an extensive selection of topics and subtopics, a mega menu is an optimal way to organize and structure your website’s navigation.
This type of navigation menu has the capacity to provide visitors with a comprehensive overview of all the categories that are available on your site, allowing them to quickly jump from one section to another without having to navigate through multiple levels.
Additionally, this type of menu often includes images or icons that can help users distinguish between topics at a glance.
By providing an intuitive interface that allows users to easily access content within the site, mega menus may significantly increase engagement and decrease the time that it takes for visitors to find what they are looking for.
Method 1: Create the default mega menu in Divi
Perhaps you didn’t know but Divi comes with a built-in mega menu. This mega menu does not have many styling options but if you just need something simple then it might be for you.
Step 1: Building the menu structure
In your WordPress dashboard navigate to Appearance > Menus.
To add a mega menu you have to build the menu structure first. start by building the following structure.
In my example, the menu link “Features” is the mega menu link. The nested first, second, third, and fourth columns are the parent menu links for each column.
Inside each column, I have placed 3 menu links.
Step 2: Assign the mega menu class
First, you have to enable the CSS classes option in WordPress. In the upper right corner click on “Screen Options” to expand the tab.
Then enable the option CSS classes.
Now expand the parent mega menu item and place the following class in the CSS class field: mega-menu.
And that’s it you have now created a Divi mega menu and this is how it looks on the front end.
The options are limited with this mega menu so if you like more styling options then the next method is for you.
Step 3: Customize the mega menu
There are almost no styling options for the mega menu so I have created some CSS snippets that you can use to style the mega menu.
Go to Divi > Theme Options > CSS and paste the following in there:
/* ### Mega menu container ### */
li.mega-menu > ul {
border-radius: 6px; /* Border radius of mega menu */
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1); /* Shadow of mega menu */
padding: 25px 25px !important; /* Space around mega menu */
}
/* ### Mega menu titles ### */
.et_pb_menu ul li.mega-menu > ul > li > a:first-child {
color: #000 !important; /* Title color */
border-bottom: 1px solid #b5f1e9; /* Line color */
font-weight: bold; /* Title font weight */
margin-bottom: 6px; /* Space below line */
padding-left: 0px; /* Space left of title */
}
/* ### Mega menu sub items ### */
.et_pb_menu li.mega-menu li li a {
font-size: 14px; /* Sub item font size */
color: #000 !important; /* Sub item font color */
padding: 0px; /* Space around sub items */
font-weight: 300; /* Sub item font wight */
}
When you have added this your mega menu should look like this:
I have made descriptions in the CSS snippets of what each line of code does.
And for the mobile menu, should look like this:
Method 2: Create a mega menu with a FREE PLUGIN (advanced)
There is a great free plugin for creating mega menus and that is Max Mega Menu. You can create amazing mega menus with this plugin however this is a more complicated plugin to work with in combination with Divi.
However, there are tons of styling options to create mega menus with this plugin and the mega menus on this site are created with this plugin.
I will give you a brief setup for Max Mega Menu and Divi and from there you can use the documentation from the plugin to customize it further.
If you are pretty new to Divi and web design in general then is solution might not be for you and you can check out the other plugins in this guide.
Step 1: Install Max Mega Menu
Go to Appearance > Plugins and search for Max Mega Menu plugin.
Install and activate this plugin.
Step 2: Setup the menu
In Appearance > Menus create a menu and assign this as the primary menu, then enable max Mega Menu.
Step 3: Create a Global Header
Go to Divi > Theme Builder and create a Global Header.
Create a column structure 1/4 – 3/4.
For the logo use an image module and place that in the 1/4 column.
Place a code module in the other column.
In that code module, paste the following shortcode:
[maxmegamenu location=primary-menu]
Step 4: Creating and styling the menu
From here I recommend following the documentation from Max Mega Menu to set up and style your meg menus.
You can find the documentation here:
https://www.megamenu.com/articles/getting-started/
Method 3: DiviMenus by DonDivi
DiviMenus is a revolutionary Divi mega menu plugin for the Divi Builder designed by DonDivi that allows users to create and customize mega menus. Mega menus are drop-down menus with multiple columns, allowing for the display of more information and content in an organized manner.
This makes it easier for users to quickly find what they are looking for. With DiviMenus, users can easily create their own unique mega menus and customize them to their specific needs or preferences. You can also add images, videos, and other forms of media to make the menu even more visually appealing and engaging.
Method 4: Divi Mega Menu Pro by Divi Life
Divi Mega Pro is a plugin for Divi that makes it straightforward to create and customize Mega Menus for your website using the Divi Builder. This plugin equips you with all the features you need to design the perfect mega menu for your visitors.
It is an easy-to-use solution that requires no coding experience, making it ideal for beginners and pros alike. With Divi Mega Pro, you can add multiple columns, and add icons, images, and backgrounds to give your menus a unique look.
You can also control menu items from the WordPress dashboard, customize text color and font size, set margins and padding for items, and create custom CSS classes for more advanced styling options. Create a beautiful navigation design that works on any device with Divi Mega Pro!
Method 5: Divi Mega Menu by Divi Engine
Divi Mega Menu is a powerful plugin created by Divi Engine that gives you the ability to create complex and visually stunning menus on your Divi website.
With Divi Mega Menu, you can easily customize the look and feel of your menu to make it perfectly fit with your website’s layout and design. You can also add custom content such as images, video clips, sliders, banners, or even HTML content to each submenu item so you get ultimate control over how your site looks.
Divi Engine has created two new modules: Mega Drop-Down and Mega Tabs. The Mega Drop-Down module allows users to create a drop-down menu that shows additional links or submenus when the parent menu link hovers over.
The Mega Tabs module enables users to create vertical tabs that change the content to the right when they are hovered or clicked, providing an interactive and informative experience for visitors.
Both of these modules can help make navigating your website easier and more user-friendly for both desktop and mobile devices.
5 examples of great-looking mega menus
These examples of mega menus will give you ideas for your own website and illustrate the different types of uses for mega menus. You will see how large companies have integrated mega menus into their web navigation in order to make it easier for visitors to find what they’re looking for quickly and easily.
Example 1: Header layout pack
This is a mega menu from my header layout pack and it is similar to the mega menu on the Elegant Themes website.
This mega menu is created with the Divi Builder and is fully customizable. Because you can use the Divi Builder you can place any row or module in a mega menu.
Example 2: Citadelle
Citadelle Gin’s mega menu design employs a unique, full-screen overlay technique instead of the typical drop-down menu. This type of menu style occupies an entire screen instead of just occupying a small space in the corner or along the edge of an existing page.
It allows users to navigate through a larger set of options, enabling them to quickly access information and functions. Additionally, it provides an eye-catching visual experience that is more engaging than traditional menus.
Example 3: Titan
This example is from my eCommerce Divi child theme Titan. It consists of a row with a 5-column structure ideal to place all the product categories. Below those categories, there is a row for promotional banners.
Example 4: QuickBooks
QuickBooks provides a convenient and organized way to access their various products directly from their home page. The mega menu offers clear categorization that is tailored to the customer’s goals, making it easier to find the right product with minimal effort. Furthermore, the well-defined layout makes navigating the website intuitive and efficient.
Example 5: Apose
The Apose mega menu is an interactive and user-friendly design feature that utilizes a carousel for optimal menu navigation.
Its purpose is to make it easier for users to find what they are looking for within a website, without having to scroll through page after page of content.
The carousel allows users to quickly jump between different categories or items while giving them a visual representation of the items within each section. Additionally, this type of menu often features images and illustrations which help draw users into the experience and makes them feel more connected with the product being offered.
Conclusion
In conclusion, having a mega menu in Divi is a great way to navigate your website’s content and make it easier for visitors to quickly access what they need.
It’s also easy to build and customize a professional-looking mega menu in Divi, with five different methods available.
Whatever method you choose, creating an eye-catching Divi Mega Menu will give your site an extra touch of finesse that makes it deal out from others!
If you have any questions please let me know in the comments below.
I love how the standard Divi Menu is Sticky and Shrinks a little on scroll.
If there was a Mega Menu that would do this and have options for styling I’d be all in for it.
Method 1: The default mega menu does this somewhat ok but it’s near impossible to add any nice styling. My biggest nugget about it is, move the mouse 1 pixel out and it disappears in an instant having to navigate around the mega menu looking for the spot again.
Hi Pete,
I can not speak for every plugin mentioned in this post but I think you can make the main header shrink on scroll with the sticky options.
When you enable sticky options in the section with the menu (Advanced > Scroll Effects > Sticky) then every design element will have sticky options and you can create a shrinking header on scroll.
Yes, the default mega menu is lacking in styling.