How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Feb 16, 2021 | Everything Divi for WordPress

In the past, we’ve shared different types of headers you can create with Divi and the Divi Theme Builder. As a matter of fact, you can find all of those tutorials listed in this navigation post. In that post, you’ll notice we’ve shown you how to create a fullscreen header, but to help you take your header design even further, we’ll show you how to create a custom-animated hamburger menu as well. There are a few notable things about the hamburger menu we’ll create:

  • As soon as visitors click on the hamburger icon, a fullscreen header will transition in, and each menu item will reveal one by one, giving it a custom-animated look and feel
  • The custom animations are triggered each time the menu is opened
  • You’ll be able to add dropdown items to the main menu items as well, these open on click and close automatically as soon as someone closes the menu or clicks a navigation item

In other words, this is definitely a header tutorial that’ll help you add that advanced look and feel to your website. You’re able to style the items however you want as well and you’ll be able to download the JSON template file for free!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Mobile

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-1 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Download The Global Header Template for FREE

To lay your hands on the free global header template, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Create New Header Template

Go to Divi Theme Builder & Add New Global Header Template

Start by going to the Divi Theme Builder. One there, add a new global header.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Start Building From Scratch

And start building the header design from scratch.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-1 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

2. Build Logo & Hamburger Icon

Section Settings

Background Color

Once inside the template editor, we’ll start by building the logo and hamburger icon. You’ll notice there’s already a section there. Open the section settings and apply a transparent background color.

  • Background Color: rgba(255,255,255,0)

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-2 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Move on to the section’s design tab and remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-3 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Position

Then, go to the advanced and turn the section fixed.

  • Position: Fixed
  • Location: Top Left
  • Z Index: 13

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-4 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-5 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Sizing

Without adding modules yet, open the row settings, move on to the design tab and change the sizing settings accordingly:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 95%
  • Max Width: 100%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-6 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-7 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Main Element CSS

And to make sure both the logo and hamburger icon appear next to each other on smaller screen sizes, we’ll insert one line of CSS code in the row’s main element.

display: flex;

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-8 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Image Module to Column 1

Upload Logo

Time to add modules, starting with an Image Module in column 1. Upload a logo of your choice.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-9 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Sizing

Move on to the design tab and change the sizing settings next.

  • Max Width:
    • Desktop: 80px
    • Tablet & Phone: 50px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-10 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Position

Then, reposition the entire module.

  • Position: Absolute
  • Location: Top Left
  • Vertical Offset: 20px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-11 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Text Module to Column 3

HTML Structure in Content Box

In the third column, we’ll add a Text Module. We’ll use this Text Module to create our hamburger icon. Start by switching over to the text tab in the content box and insert the following HTML tags:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-12 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Sizing

Modify the module’s sizing settings next.

  • Width: 80px
  • Height: 80px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-13 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Then, apply custom padding values across different screen sizes.

  • Top Padding:
    • Desktop: 10px
    • Tablet & Phone: 17px
  • Bottom Padding:
    • Desktop: 10px
    • Tablet & Phone: 17px
  • Left Padding:
    • Desktop: 15px
    • Tablet & Phone: 30px
  • Right Padding:
    • Desktop: 15px
    • Tablet & Phone: 10px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-14 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Position

Reposition this module as well.

  • Position: Absolute
  • Location: Top Left Corner

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-15 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

3. Build Hamburger Menu

Add New Section

Gradient Background

Now that we have the logo and hamburger icon in place, we can move on to the next part which is dedicated to building the hamburger menu and all its items. Start by adding a new section, open the section settings and apply a gradient background.

  • Color 1: #000000
  • Color 2: #111111
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Position: 50%
  • End Position: 50%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-16 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Sizing

Apply a min height and max height to the sizing settings next.

  • Min Height: 100vh
  • Max Height: 100vh

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-17 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Then, remove all default section top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-18 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Overflows

Modify the overflows as well.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Auto

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-19 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Position

To make sure the menu can be opened at all times, we’ll reposition the section in the advanced tab.

  • Position: Fixed
  • Location Top Center

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-20 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-21 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Sizing

Without adding modules yet, open the row settings, move on to the design tab and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-22 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-23 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Overflows

Then, go to the advanced tab and change the overflows.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Auto

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-24 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Position

Reposition the row as well.

  • Position: Absolute
  • Location Top Center

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-25 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Column 1 Settings

Spacing

Next, we’ll open the column 1 settings of our row and apply some custom responsive padding values.

  • Top Padding:
    • Desktop: 24vh
    • Tablet & Phone: 10vh
  • Bottom Padding:
    • Desktop: 24vh
    • Tablet & Phone: 5vh
  • Left Padding: 13%
  • Right Padding: 13%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-26 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Border

We’ll apply some border settings too:

  • Right Border Width:
    • Desktop: 2px
    • Tablet & Phone: 0px\
  • Right Border Color: #191919
  • Bottm Border Width:
    • Desktop: 0px
    • Tablet & Phone: 2px
  • Right Border Color: #191919

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-27 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Column 2 Settings

Spacing

Then, we’ll move on to column 2 and apply some custom padding values there too.

  • Top Padding:
    • Desktop: 24vh
    • Tablet & Phone: 5vh
  • Bottom Padding:
    • Desktop: 24vh
    • Tablet & Phone: 5vh
  • Left Padding: 13%
  • Right Padding: 13%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-28 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Text Module #1 to Column 1

Add H3 Content

Time to add modules, starting with a first Text Module in column 1. Add some H3 content of your choice.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-29 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

H3 Text Settings

Move on to the design tab and change the H3 text settings as follows:

  • Heading 3 Font: Montserrat
  • Heading 3 Font Weight: Ultra Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size
    • Desktop: 1vw
    • Tablet: 2.5vw
    • Phone: 3.5vw
  • Heading 3 Letter Spacing: 5px

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-30 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Add some bottom margin next.

  • Bottom Margin: 5vh

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-31 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Clone Text Module & Place Duplicate in Column 2

Once you’ve completed this first module, you can clone it once and place the duplicate in column 2.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-32 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Change Content

Make sure to change the content in this duplicate module.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-33 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Text Module #2 to Column 2

HTML Structure in Content Box

To showcase our menu items, including sub menu items, we’ll use the text tab of a new Text Module. Go ahead and add a new Text Module to column 1 and insert the following HTML:

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul> <li><a href="#">Web design</a></li> <li><a href="#">Branding</a></li>
</ul>

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-34 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Text Settings

Move on to the module’s design tab and change the text settings as follows:

  • Text Font: Montserrat
  • Text Font Weight: Thin
  • Text Color: #ffffff
  • Text Size:
    • Desktop: 2.7vw
    • Tablet: 4vw
    • Phone: 6vw
  • Text Letter Spacing: 0.1em
  • Text Line Height: 1em

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-35 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Link Text Settings

Change the link text color too.

  • Lin Text Color: #ffffff

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-36 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Unordered List Text Settings

Then, modify the unordered list text settings.

  • Unordered List Font: Montserrat
  • Unordered List Font Weight: Bold
  • Unordered List Font Style: Uppercase
  • Unordered Text Size:
    • Desktop: 1vw
    • Tablet: 2.5vw
    • Phone: 3.5vw
  • Unordered List Line Height: 1.5em
  • Unordered List Style Type: None
  • Unordered List Style Position: Inside

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-37 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

And complete the module settings by adding some custom top and bottom padding.

  • Top Padding: 5%
  • Bottom Padding: 5%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-38 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Clone Text Module to Create Variation Without Submenu

Once you’ve completed the first module, you can clone it once. We’ll use this duplication to create a variation of the menu item without sub menu items.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-39 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Leave Out Submenu & Toggle Icon

To turn this duplicate module into a regular menu item without submenu items, use this HTML structure instead:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-40 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Reuse Both Types of Menu Items

Once you have both variations of the menu items in place, you can reuse both of them accordingly by cloning them and changing the content.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-41 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Text Module #2 to Column 2

Add H4 & Paragraph Content to Content Box

In column 2, we’ll add another Text Module with some H4 and paragraph content of our choice.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-42 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Alata
  • Text Color: #cecece
  • Text Size:
    • Desktop: 0.8vw
    • Tablet: 2.4vw
    • Phone: 3.4vw
  • Text Letter Spacing: 1px
  • Text Line Height: 1.5em
  • Text Color: Light

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-43 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

H4 Text Settings

Make some changes to the H4 text settings too.

  • Heading 4 Text Size:
    • Desktop: 1vw
    • Tablet: 3vw
    • Phone: 4vw

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-44 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Sizing

Then, modify the module’s width in the sizing settings.

  • Width: 48%

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-45 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Main Element CSS

And add one line of CSS code to the module’s main element. This line of CSS code will help us place two Text Modules next to each other.

display: inline-block;

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-46 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Clone Text Module #2

Change Copy

Once you’ve completed the Text Module, you can clone it once and change the content accordingly.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-47 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Social Media Follow Module to Column 2

Add Social Networks of Choice

The last module we need in this design is a Social Media Follow Module in column 2. Add the social networks of your choice.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-48 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Remove Each Social Network’s Background Color Individually

Remove the background color of each social network individually.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-49 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Spacing

Then, go back to the general module settings and apply some top margin.

  • Top Margin: 5vh

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-50 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

4. Add Functionality

Add CSS Class to Hamburger Icon Text Module

Now that the foundation of our hamburger menu design has been built, we can now focus on adding functionality! The first thing you’ll need to do is open the Text Module containing the hamburger icon and add the following CSS class:

  • CSS Class: fullwidth-open

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-51 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add CSS Class to Section #2

Then, open the hamburger menu section, section #2, and add the following CSS class:

  • CSS Class: fullwidth-menu

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-52 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add CSS Class to Each Module in Fullwidth Menu

To create the custom stagger animation effect, we’ll need to apply the following CSS class to each module in section #2.

  • CSS Class: stagger-effect

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-53 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Extra CSS Class to Menu Items

Add an extra CSS class, called “main-menu-item”, to each one of the menu items in column 1 as well.

  • CSS Class: stagger-effect main-menu-item

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-54 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Add Code Module to Section #1

To apply the functionality, we’ll use custom CSS and JQuery code. We’ll place this code in a new Code Module in the second column of our row in section #1.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-55 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Insert CSS Code

Add the following CSS code to the Code Module in between style tags as you can notice in the print screen below.

/* enable class below once you're done editing the menu */ /*
.fullwidth-menu {
display: none;
}
*/ .line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
} .fullwidth-open.open .line{
background: white;
} .line-1 {
top: 15px;
} .line-2 {
top: 25px;
width: 80%;
} .line-3 {
top: 35px;
width: 50%;
} .fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
} .fullwidth-open.open .line-2 {
display: none;
} .fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
} .fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
} .fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
} .main-menu-item ul {
display: none;
padding: 0;
margin-top: 50px;
} .toggle-sub-menu {
cursor: pointer;
}

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-56 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Insert Anime.js Library

Continue by adding the Anime JavaScript library using script tags as you can see in the print screen below. We’ll use this awesome library to create the stagger effect in the next step of the tutorial.

  • src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-57 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Insert JQuery Code

The click functionalities in our hamburger menu are powered by the following JQuery code. Make sure you place this code in between script tags as you can see in the print screen below.

jQuery(function($){
$(document).ready(function(){ // Prevent fullscreenn menu from showing up when loading
$(window).load(function() {
$(".fullwidth-menu").fadeIn(1000);
}); // All variables needed in functions
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu'); // Hide fullscreen menu by default
menuSection.css('opacity','0');
menuSection.css('top','0vh');
menuSection.css('visibility','hidden'); // Open fullwidth menu & animate items
hamburgerIcon.click(function(){
$(this).toggleClass('open');
menuSection.toggleClass('fullwidth-menu-open');
if (menuSection.hasClass("fullwidth-menu-open")) {
anime({
targets: '.stagger-effect',
translateY: [150, 0],
opacity: [0, 1],
loop: false,
delay: anime.stagger(100, {easing: 'easeOutQuad'})
}); } else {
subMenu.slideUp();
toggleIcon.text($(this).text() == '+' ? '-' : '+');
}
}); // Close fullwidth menu when clicking an item
menuLink.click(function(){
hamburgerIcon.toggleClass('open');
menuSection.toggleClass('fullwidth-menu-open');
subMenu.slideUp();
toggleIcon.text($(this).text() == '+' ? '-' : '+');
}); // Change icon when toggling the submenu
toggleIcon.click(function(){
var subMenu = $(this).parent().find("ul");
subMenu.slideToggle();
$(this).text($(this).text() == '-' ? '+' : '-');
}); });
});

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-58 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Activate CSS Class as Soon as You’ve Completed Your Fullscreen Header Design

Last but not least, we’ll enable a CSS class in the Code Module which you can find in the first section. Open the Code Module and remove the “/* */” at the beginning and end of the class. Enabling this class (in combination with some JQuery code that’s already enabled) will make sure the section containing the menu items doesn’t load right away when someone visits one of your pages. Once you enable this class, the second section on your page will disappear from the Visual Builder, but you can still access it in the Wireframe Mode or turn off the CSS class if you want to make additional changes.

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-59 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

5. Save Header & Theme Builder Changes

That’s it! The only thing left to do is save the template and Divi Theme Builder and view the outcome on your website!

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-60 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-61 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Mobile

how-to-build-a-stagger-animated-hamburger-menu-with-divi-anime-js-1 How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Final Thoughts

In this post, we’ve shown you how to get creative with your Divi header. More specifically, we’ve shown you how to create a custom-animated hamburger menu. As soon as a visitor clicks on the hamburger icon, a fullscreen menu transitions in and reveals the menu items one by one, which results in a beautiful user experience. You were able to download the template JSON file for free as well! If you have any questions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Source

WordPress Development

SEO NEWS

seo news

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.