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 organize the many demo pages. As a 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 columns mega menu into a 5 column mega menu.

For more advanced mega menu features you may want to look at using a mega-menu plugin that is compatible with Divi. 4 of the best ones are listed in the 4 best Divi mega menu plugins (2019) article on our blog.

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