How to Use Animated Toggle Hamburger Icon in Elementor [Pro]

In today’s tutorial, you will learn to use a lottie animation to create an animated toggle hamburger icon, and then set your toggle hamburger to animate either on hover or on click. This will link to your off-canvas popup with the navigation menu. You can use this animated icon in your headers or sections in Elementor.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Animated Toggle Hamburger Tutorial

What You’ll Need

  1. For this tutorial, you’ll need Elementor Pro.
  2. You’ll also need an already made header or a section to add your animated toggle icon.

Let’s get started.

Adding a Lottie Icon (Animation)

In your Elementor dashboard, go to the Templates area and click on Theme Builder. As I mentioned earlier, you should be having an already made hero or section, which you should be opening up here.

Here, I have a header with 3 columns (00:39)

8hcQEXsROn1wlRJAlzHAhzlq66ivQyQRkubG1yuWLhwGbce15TH8umkSAzkXnHqX0mDXBq cYpEX3 T6iWOTI eL 8H7FDEXXBi0DjBPfiQTpXk Flm3m4sRJRejTigUjojc2GAv

I’m going to be adding the toggle hamburger icon in column number 3.

Note: By default, when you use the Elementor Navigator Widget you get that kind of toggle hamburger button which you can style any way you want.

However in this case we want to use an animated custom icon, so just delete the default toggle hamburger button in column 3.

Go to and find this icon (Hamburger Menu to Back Arrow, by Darren Samuels) 


TZd SOs8Ii5AjwcbhXMpjo06yMeXCAakHtWY8PijrQ51dZc i8HUrpHtq1j9aSV4AwRARKj85oBAK3I aBAqHuLwGoMzTT KcWgErfSdYSRZ72uJqAgg8zn16ibBWAGTBfboKeSO

This is the icon I’ll be using in the header to trigger my menu.

For starters you need to change its to a color of your choice, to do this you need to be logged into Lottie Files. You can go to the website and create a free account. 

After finding the animated icon in your Lottie Files, scroll down to the Edit Layer Colors option and click on it. 

Also Read: Elementor Blobs Generator – Create Blobs with Gradients, Animations and Shapes

Change the Grouped Color option to white and click on update. Now download the ready icon (it’s not visible because it’s white in color and the background is white too, but go ahead and download), then go back to your Elementor site.

Go to the Widgets area and search/select the Lottie widget then drag and drop it into your section (column 3). (01:48)

bM81aMMVHzBslLBLAUf0Tw0kHPW69rI E7xV74gB YSsp7v4lnR77u k7nIPqMVDoUKGq

Now go to the left side under content and on the Source option; you can either link a media file or use an external URL.

So choose the media file under source, then go upload the file to the media library and then insert it. Or you can even just copy the link from Lottie. (02:12)

Animated Toggle Hamburger

Animating the Lottie Icon

The Lottie icon is now there in the header but now it needs to be animated. To do this:

Go back to the editor and select the Lottie icon, under Content go to settings then go to Trigger; choose to trigger on hover (from the dropdown options). This will animate the icon every time you hover over it. You also have the option to set it to animate on click if you want.

Linking the Lottie Icon to Off-Canvas Menu

After animating the Lottie icon, I need it to be linked to an off-canvas menu so that when someone clicks on it they can view the menu.

Select the Lottie icon then go down to the Link option, here choose the option of Custom URL. (03:06)

68F25XjBc5Te84 WzVdCjI6slo PoOqXi

Under custom URL click on the icon for the Dynamic Tags (database), select the Popup option under Actions, then select to open popup and the main menu popup option. Click the Update button at the bottom.

Note: make sure you already have an already made popup menu to link to the Lottie. If you don’t know how to do this refer to this tutorial

Animated Toggle Hamburger Responsive Settings

Go back to the Lottie widget and under Style; set Width to 85% and the Max size to 100%.

Now go to Advanced and go to Positioning, here you need to set the size for each device:

For Desktop, set Custom width of 109, horizontal orientation 13.2 pixels and vertical -20

On the Tablet; set custom width 143, horizontal orientation 329 and vertical orientation -6

On the mobile device; set custom width 143, 36.2 for horizontal orientation and -25 for vertical orientation.

After doing this, update and preview. The animated icon is done and is will responsive on all devices.

You are also able to increase the number of breakpoints to enable your icon to be responsive across all devices. You can just go over to the header settings and under the Breakpoints option, add another tablet or widescreen or any other device size. (05:08)



Now you can use your Lottie animation as a toggle hamburger icon in your headers as well as dynamically link a popup to it.

Hope this tutorial was helpful to you. Don’t forget to subscribe to my channel and newsletter for more tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users