This is a very simple technique but so important to know. When you conceive of a new site one of the first things you envisage is the menu design; linear, side menu, pull out menu, etc. One awesome option is the mega menu which can be applied to your theme very easily.

In the Divi theme there is a class .mega-menu that flips the standard horizontal menu to become a mega menu. A mega menu is one that displays all of the items at once in an orderly way. The default is 4 columns but if you need more they will wrap to the next row.

The method was outlined in the facebook Divi theme user groups where Va Mak from the Divi University explains how to set the default menu in a youtube video and Alex Brinkman provides the CSS to get 6 columns before wrapping

So the method is simply:

1. Set up your menu.
2. Place the class .mega-menu in the top level menu item.
3. If more than 4 columns are required then:
- place some CSS in your stylesheet or Custom CSS
- add the relevant class or classes to the top level menu item

And for the CSS:

/* ---------- MEGA MENU 5 COL -------------------- */
#top-menu li.mega-menu.col-5 > ul > li:nth-of-type(5n),
.fullwidth-menu-nav li.mega-menu.col-5 > ul > li:nth-of-type(5n) {
    clear: none;

#top-menu li.mega-menu.col-5 > ul > li:nth-of-type(6n),
.fullwidth-menu-nav li.mega-menu.col-5 > ul > li:nth-of-type(6n) {
    clear: none;

#top-menu li.mega-menu.col-5 > ul > li,
.fullwidth-menu-nav li.mega-menu.col-5 > ul > li {
    width: 20%;
    margin: 0;

/* ---------- MEGA MENU 6 COL -------------------- */ 
#top-menu li.mega-menu.col-6 > ul > li:nth-of-type(5n),
.fullwidth-menu-nav li.mega-menu.col-6 > ul > li:nth-of-type(5n) {
    clear: none;

#top-menu li.mega-menu.col-6 > ul > li:nth-of-type(7n),
.fullwidth-menu-nav li.mega-menu.col-6 > ul > li:nth-of-type(7n) {
    clear: none;

#top-menu li.mega-menu.col-6 > ul > li,
.fullwidth-menu-nav li.mega-menu.col-6 > ul > li {
    width: 16%;
    margin: 0;

If you only need 5 columns then there’s no need to include the CSS above for col-6.

So for the standard mega menu your CSS would be: mega-menu

For a mega menu with 5 columns the CSS would be: mega-menu col-5

And a mega menu with 6 columns would look like this: mega-menu col-6

The image below of a WordPress Menu would display a mega menu of 6 columns with column 7 wrapping under column 1.

In EXTRA all you need do is place the .mega-menu class into the top level menu item as described above for Divi and the rest is done automatically. For Webpapa I managed to get 8 columns without using any CSS.