Add extra columns into your Divi mega menu with some custom CSS.

I was revamping the layout of my Divi layouts Demo Zone install and decided to make use of the built in Divi mega menu feature to help organsise the many demo pages. As default the Divi mega menu when activated shows only 4 columns, but to make better use of space, I wanted to have 5 columns (and probably more as more Divi demos are added). So, by adding a few lines of custom CSS I changed the 4 column mega menu into a 5 column mega menu.

divi-mega-menu-columns

The following code was provided by Gourav over on the Elegant Themes support forum.

To use, all you need to do is add the following code (just the code for how many columns you actually want) into your custom CSS box in the Divi Theme options, or you can also add to your Divi child themes style.css.

5 column Divi Mega Menu

#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 Divi Mega Menu

#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 Divi Mega Menu

#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 Divi Mega Menu

#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;
}

Elegant Themes' Black Friday/Cyber Monday sale is still on if you want 25% discount! Dismiss

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close