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 desired number of columns into the WordPress menu dashboard
- 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 it to 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;
}
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/