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
- Log in to your WordPress dashboard and go to Appearances > Menus.
- 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. - Add a custom link to the menu to act as the mega-menu trigger
- Drag your parent menu links & their submenu links under the trigger link
- Under “Screen Option” check the CSS Classes checkbox
- In your top trigger link settings for CSS Classes, add the class “mega-menu”
- Save your menu and you have an active mega-menu
- 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.
that’s awesome!
So fabulous. Thank you!
hello divithemeexamples thanks for this but i need to reduce the size of mega menu background and make it samaller, can you please help me
Hello divithemeexamples. I have a question. How can I add 3 mega menus in my site with diferent columns? for example. 1mega-menu 4 columns, 2mega-menu 6 columns, 3mega-menu 7columns.
not had a chance to check, but id assume you could target each one individually within the css
I would love to target each individually with CSS, but am struggling to figure out how to do that. What CSS selectors would I change to the individual percentages to target a 3-column, etc…?
Same question!
owesome.its work for me.
I made a mega menu of 6 column thanks to this code. But I have a problem. I have a category of 12 subcategories and the line break is initially 4 columns, suddenly instead of having 2 rows of 6 columns I have one of 6 one of 2 and one of 4, not even left aligned
The default of the Divi is the straight line menu but thanks to this tutorial I made the Menu 5 columns. Thank you very much
Good work !. But replace in code > for > 😀
thanks!
Thanks for this!
Thank you Craig! Worked like a charm!
Thank you for your article. but it is not working for me. It’s still showing 4 columns
Just tested and work ok. see SHOWCASE GALLERY link in the menu above where i added a 5th column with an image in it
This no longer works. Nothing seems to change unfortunately.
Just tested for 5 columns and works as expected. You do need to actually have a 5th column set up in your menu dashboard.
It works as intended – I went with the 6 column version. However since I am using a custom header, I had to adjust the code a bit #top-menu became #menu-primary-menu. But alas I appear to be missing something because, once I click on the actual mega menu dropdown, it reverts back to 4 column.
See here: https://test.plantdeck.com/ – 6 column works and formats as intended (I added a left alignment as well)
But once I am on the actual mega-menu: https://test.plantdeck.com/shop/
or any of its sub items : https://test.plantdeck.com/product-category/planters/
It reverts back to the default 4 column.
I see the same menu on all 3 links above. 6 menu items. but, unless you plan to add links under these 6 links you may as well leave them in a single column
Hi, it is possible to have just 3 columns in order to have longer titles without dropping a row? I meant not 4, 5 or 6 columns. Just 3 columns.
just follow the usual steps for mega menu in Divi @ https://www.elegantthemes.com/documentation/divi/mega-menus/
And thank you!!
owesome.its work for me. thanks
I’ve just tried to add this code but it doesn’t seem to be working on my site 🙁 I still have 4 columns, double checked the menu title to see if that was the issue but no luck. Can you offer any help please?
did you actually add the extra column into the menu setup in your WP dashboard?
Hi Craig, thanks for the reply. I have 5 menu headings in my Mega Menu, the 5th heading and submenu items just appears under those in the column before it
Thanks for taking the time to post this. It saved me so much time.
Hi, Where di I find: ‘Add the desired number of columns into the WordPress menu dashboard’?
https://www.elegantthemes.com/documentation/divi/mega-menus/