How to Create a Hamburger Icon for Your Divi Mega Menu

Hamburger icons have become synonymous with menus. The three stacked horizontal lines represent the idea of a list and have been nicknamed “hamburger” for it’s obvious similarities. Divi uses the hamburger icon to toggle your main menu on mobile and on certain header styles like “slide in” and “fullscreen”.

Today I’m going to show you how to use a hamburger icon to toggle a mega menu on click. This is a great solution for those sites with lots of menu options. The hamburger icon keeps the header clutter free. Plus the organized 4 column layout of the mega menu allows users to find what they need quickly and efficiently.

The Before and After

By default, the mega menu works by hovering over the main parent menu link:

After implementing the new design and functionality, the mega menu only shows when you click the hamburger icon.

Implementing the Design with Divi

Subscribe To Our Youtube Channel

Convert Your Menu into a Mega Menu

First you need to create a mega menu or change your current menu into a mega menu. This part is pretty simple.

From the wordpress dashboard, go to Appearance → Menus. Click Create New Menu and give your menu a name.

Click Create Menu

Make sure to activate the CSS Classes menu property by clicking the Screen Options tab at the top right of Menus screen and checking CSS Classes..

Now you can add your menu items to the new menu you created.

First, let’s add the menu item that will serve as our hamburger icon. This menu item will be the parent of all the other menu items.

To make this menu item, create a custom link with the following settings:

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

The URL is simply a hashtag(#) because this menu item will not be linking to any certain page. We will be using this menu item to deploy our mega menu on click.

The navigation label has some simple html code (a div with a class of “hamburger”). This will be what we use to show our hamburger icon using Custom CSS.

The CSS class “mega-menu” is what deploys the mega menu functionality. This css class should only be applied once to the main parent menu item and not to any of the sub items.

Now it is time to add the menu items that will make up your mega menu. For this example I’m using the following parent and sub menu items under the main mega menu item:

• Mega Menu Hamburger Icon Link
  • About Us
    • Our Team
    • Our Mission
    • Company History
  • Services
    • Web Design
    • Web Development
    • SEO
  • Our Work
    • Blogs
    • E-commerce
    • Corporate
  • Contact Us
    • Support
    • Directions
    • Jobs

Now organize/drag the four menu items (each with three sub items of their own) to become sub items of the main parent Mega Menu link.

When you are finished organizing the menu, make sure to check Primary Menu under Menu settings.

Save Menu

Adding jQuery to Show Menu on Click Instead of on Hover

Now that your mega menu is created, we need add some jQuery to make our mega menu show when clicking the icon instead of when hovering (which is the default). To do this go to Theme Options → Integration and add the following script into the “Add code to the head of your blog” section:

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

Adding Custom CSS

While you are in Theme Options, under General Settings, add the following Custom CSS:

/*** 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*/
}

That’s it!

Now go and check out your results

More Customization Options

The CSS you entered has comments throughout so that you can make changes to your hamburger icon style. Here is where you can find the two main sections of CSS to style your icon:

Changing the Hamburger Icon

Divi comes with a variety of font icons you can use for your site. If you would like to change the hamburger icon for a different style, all you would need to do is find and edit the line of CSS labeled with the comment “change icon here”:

content: "\61"; /*change icon here*/

Here are the different content values for the different hamburger icons. Simply replace “\61” with one of the following:

Square Icon menu – \62

Circle Icon Menu – \63

ul Icon – \64

ol Icon – \65

Square Menu Icon Dark – \e056

Circle Menu Icon Dark – \e057

Changing the “X” Icon

If you are using the different hamburger menu icon, you should change the the “x” icon to match the design. Simply find find the following css:

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

Replace “\4d” with one of the following content values:

Circle Close Menu Icon – \51

Circle Close Menu Icon Dark – \e051

This is what the mega menu hamburger icon looks like with complimentary dark circle icon styles in place:

Changing the Color of Your Hamburger Icon

If you want to change the color of your hamburger icon, edit this line of CSS labeled “change icon color”:

Color: #333; /*change icon color here*/

Changing the Size of Your Hamburger Icon

If you want to change the size of your hamburger icon, edit this line of CSS labeled “change icon size here”:

Font-size: 32px; /*change size of icon here*/

Adding a Label to Your Hamburger Icon

It is easy to add a label to your icon. Simply go back to Appearance → Menus and edit the very top menu item that you gave the “mega-menu” class. In the navigation label text box, add your label text inside the div. For this example, I added the label “menu”.

<div class=”hamburger”>menu</div>

Now your hamburger has a label next to it.

Responsive?

Mega menus only work on screen sizes wider than 980px. For screen size under 980px (tablets and smartphones), the menu will switch to the default mobile menu.

Final Thoughts

If you like mega menus and are looking to create a clean and minimalist design for your header, adding a hamburger icon to display your mega menu is a great solution. Now your users can see all of your navigation links at once with a simple click.

Plus, Divi’s built-in font icons make it easy to customize your hamburger icons using css, without having to create icons from scratch.

You also can add images to your mega menus to create even more standout mega menus.

That’s it!

I hope you enjoy this feature. Looking forward to hearing from you in the comments.