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.

divi-mega-menu-columns

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 stylesheet.

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

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