Birthday Sale!

Days
Hours
Min
Sec

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Pagination to Elementor Posts - Featured Blog
Gradient Text - Featured Blog
wordpress-tag-cloud-coming-out-of-pink-computer-sc__61658

Create an Animated Hamburger Menu in WordPress using Elementor

In this article we will go through the steps of adding an Animated Hamburger icon to your Elementor website. You can use the Animated Hamburger Icon widget to toggle Elementor pro popups. You can even put a menu in a popup and create a full screen menu. So let’s dive in?

Step 1:

Install Animated Hamburger Widget in Unlimited Elements

Our first step is to install the Animated Hamburger Widget in Unlimited Elements plugin. Btw, this is totally free.

Go to widgets under the Unlimited Elements for Elementor menu.

Widgets under Unlimited Elements

Search for the animated hamburger widget and press the install button. 

animated hamburger

Step 2:

Create a WordPress menu

Upon clicking the animated hamburger icon, you expect to open a menu, right? So for that we need to create a menu in WordPress.

Create all the pages that you want to add to your menu

Because a menu needs pages then go ahead and create all the pages that you want to add to your menu. Once you’re done creating pages, then the next task is to create the menu.

Create the WordPress Menu

Go  “Appearance”  -> “Menus” in the wp-admin sidebar

Menu under appearance menu

You will see this screen where you have to enter a name for the menu. Then click on the create menu button.

Menu name and create menu

Now on the left side, you will see a menu called pages. That’s where you can select all the pages that you created, to be added to your menu. After selecting all the pages you need, click on “Add to menu” and then on the blue “Save Menu” button.

Add all pages to your menu

That’s it. Our menu is ready. Now it’s time to create a popup.

Step 3:

Create a popup

Why do we need to create a popup? Well, this popup will contain the menu!
Go and select popup under the templates tab on the wp-admin sidebar. Then click on the green “add new popup” button.

Create a popup under templates menu

Make sure “popup” is selected in the type of template dropdown. And give it a name. Like “popup”.

Template type to popup

You can cross out this modal window and create the popup from scratch. Instead of crossing out of the Elementor library window, you can also press the insert button on one of the popup templates that Elementor gives you. 

Elementor popup library

Drag and drop the Elementor’s nav menu widget.

Drag and drop the Elementors nav menu widget on the page

Select the menu that we created and customize the menu layout and how it would appear on the popup. 

Select the menu

Now go to the page settings tab and turn off the close button toggle. This will hide the close button from the page until the hamburger icon is clicked. 

Advanced popup settings

Now, when you click the publish button, you will see the conditions window. Click on the grey “add condition” button and make sure “entire site” is selected from the dropdown. 

Save changes and publish the popup

Then click on the Next button. This will bring you to the triggers page where you can set the triggers for your popup.

Clicking again on the Next button brings you to the advanced rules page where you can set advanced rules for your triggers.

Customize both the settings to your liking, then press the save and close button.

That’s it. Your popup is live.

Step 4:

Adding the Animated Hamburger Icon on an Elementor page.

This widget requires Unlimited Elements FREE version installed and activated on your WordPress website. We did this on the very first step already. So we will jump straight into adding our header where our hamburger menu icon will be at.

Drag and drop the animated hamburger widget on the page.

Drag and drop hamburger widget

Select which style of animation you want from the dropdown. Preview the animation by clicking on the hamburger menu on the page. 

Style of hamburger animation

You can use the alignment dropdown to position the hamburger to the left, right, or center of the page. You can skip this part if you later want to use the position fixed property in the advanced tab to make the hamburger icon sticky throughout the page.

Step 5:

Styling the Animated Hamburger widget

In the style tab, you can change the icon’s color using the “hamburger color” option and change the icon’s active color state using the “hamburger active color” option. You can also change the background color of the hamburger icon using the “background-color” option.

Background colour of hamburger icon

The sliders are there to let you change the border radius of the icon’s background to round or square, the size of the icon (which includes the background), and the size of the actual inner hamburger icon.

Sliders for more styling on hamburger icon

Step 6:

Making the Hamburger Icon Sticky (optional)

We may sometimes want the hamburger icon to be accessible to the users while they scroll the page. For this we have to turn the position to fixed under the positioning settings in the advanced tab. This will make the hamburger icon sticky throughout the page.

 

There are horizontal and vertical orientation options to let you align the hamburger icon to the left or right edge of the screen and top or bottom edge of the screen.

 

You can then play with the offset slider to further position the hamburger icon on the page as per your liking. The first offset slider is for the horizontal axis and the next one is for the vertical axis.

Offset sliders

 

One important tip: you should set the z-index of the widget to an arbitrary high value, like 100 or 999. You could even set it to just 5 or 10 if you are sure that no other widgets on your page have a z-index higher than that. This will make sure that the icon is always on top of all other widgets and thus clickable.

Z index for hamburger icon

 

We’re done customizing our animated hamburger icon widget! One last thing before we publish!

Step 7:

Link the Animated Hamburger to Popup

Go back to the animated hamburger widget settings and in the link box click the dynamic field icon on the right side of the gear icon. 

Database gear icon for popup link

Select the popup from the actions subheading.

Then click on the wrench icon. From there, select “toggle popup” from the actions dropdown.

Toggle popup

Select the popup dropdown right below it and enter the name of the menu template which you created.

And voilà! Clicking on your animated hamburger icon now shows the menu.

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!