Divi mega menu with 5/6/7 columns

Divi comes with a built-in mega menu that has 4 columns by default.

If you want to make your mega menu have extra columns you can add some custom CSS to Divi to achieve this.

This post will show you how to add custom CSS to change the 4 columns Divi mega menu into a 5-column mega menu.

How to add a 5 column Divi mega menu

1. Log in to your WordPress dashboard and go to Appearances > Menus.
2. Create your menu with the desired number of parent menu links or columns.
   Each column has its own submenu links.
   For example, Divithemeexamples.com has 5 columns in the Showcase Gallery menu.
3. Add a custom link to the menu to act as the mega-menu trigger
4. Drag your parent menu links & their submenu links under the trigger link
5. Under “Screen Option” check the CSS Classes checkbox
6. In your top trigger link settings for CSS Classes, add the class “mega-menu”
7. Save your menu and you have an active mega-menu
8. if you have added more than the default 4 columns, you will need to add some CSS to reflect this.
   Add the following custom CSS code to Divi (just the code for how many columns you actually want) in your custom CSS box in the Divi Theme Options or in your Divi child theme.

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

Final Thoughts

Adding extra columns to the built-in Divi mega menu is useful if you have many menu items as it makes it easier for your users to navigate to the right link.

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