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.

Making a hamburger icon for the mega menu

The following information was provided in an Elegant Themes post. We’ll cover it here for completeness of this post. This enhancement works with Divi only, and not with Extra.

step 1

Add the class ‘hamburger’ into the navigation label, wrapped in a div, like this:

step 2

Add the following jQuery to the head of your site.

Divi > theme options > integration > Add code to the < head > of your blog

<script>
/*** Open menu itmes with children on click not hover ***/
 
(function($) {
 
jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();
 
jQuery(this).parent().toggleClass('show-submenu');
});
});
 
jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});
 
})(jQuery);
</script>

step 3

Add the following CSS to your stylesheet.

/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }
 
/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }
 
/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
 a{display:none;}
 
 
#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}
 
/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}
 
/*** show hamburger icon ***/
.hamburger:before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 0.6em;
    text-transform: none;
    speak: none;
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    vertical-align: -11px;
    padding-right: 3px;
    font-size: 32px; /*change size of icon here*/
    content: "\61"; /*change icon here*/
    color: #333; /*change color of icon here*/
}
 
/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d"; /*change x icon here*/
}

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.