Divi mega menu with 6 columns

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.

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