Why would you use a mega menu?
A mega menu allows users to see more links all at once without the hassle of scrolling, hovering, and remembering the contents of your menu. A good way to think about them is that they are drop-down menus within drop-down menus. So, instead of a standard drop-down, which shows a sub-menu when hovering over the main parent links in your navigation bar, a more comprehensive one allows you to have additional parent links and submenus within it. You can see everything on offer in one go. These are great for desktop users.
This tutorial by Elegant Themes is a great place to start. Divi Mega Menus
How to add a mega menu to your Divi site
To make one, you have to add a special CSS class to the main top-tier tab. To do this, head to your Menu found in the sidebar and select the ‘Screen Options’ button at the top of your page, then make sure the CSS class option is checked.
Then, add a CSS class to the tab you want to have a mega menu under. Find the CSS Classes text box and enter the ” mega-menu ” class. Then save.
Add extra columns into your new menu with some custom CSS.
As default, the menu, when activated, shows only four columns, but to make better use of space, you can add more columns. So, by adding a few lines of custom CSS, we can change the 4-column layout into a 5, 6, 7, and column configuration.
Just add the required CSS to your Divi theme options CSS window.
Commenting out a heading is always a good idea to help you keep track of the code you are adding.
Something like /** DIVI 7 COL MEGA MENU **/
5-column
|
1
2
3
4
5
6
7
8
9
10
|
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {clear: none;}#top-menu li.mega-menu > ul > li:nth-of-type(6n) {clear: none;}#top-menu li.mega-menu > ul > li {width: 20%;margin: 0;} |
6-column
|
1
2
3
4
5
6
7
8
9
10
|
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {clear: none;}#top-menu li.mega-menu > ul > li:nth-of-type(7n) {clear: none;}#top-menu li.mega-menu > ul > li {width: 16%;margin: 0;} |
7-column
|
1
2
3
4
5
6
7
8
9
10
|
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {clear: none;}#top-menu li.mega-menu > ul > li:nth-of-type(8n) {clear: none;}#top-menu li.mega-menu > ul > li {width: 14%;margin: 0;} |
8-column
|
1
2
3
4
5
6
7
8
9
10
|
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {clear: none;}#top-menu li.mega-menu > ul > li:nth-of-type(9n) {clear: none;}#top-menu li.mega-menu > ul > li {width: 12%;margin: 0;} |
Column and placement adjustments
Sometimes you may need only 2 or 3 columns. The Divi default will still be full width and looks a bit naff amd is aligned on the right. To fix this you can reduce the with and position.
The position code has several options and is written by Geno Quiroz in this post .
Some of it is here BUT NOT ALL
/** MEGA MENU **/
.et_fullwidth_nav #top-menu li.mega-menu>ul {
right: 30px!important;
left: 30px!important;
width: 400px;
}
/* default or centered style header mega menu alignment */
.et_header_style_left #top-menu li.mega-menu > ul {
left: auto!important;
right: 0;}
.et_header_style_centered #top-menu li.mega-menu > ul {
left: auto!important;}
.et_header_style_centered #top-menu > li:last-child.mega-menu > ul {
left: auto!important;
right: 0!important;}
Some sites we have used Mega Menus on:
Some sites we have used Uber Menus on: