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)

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 lottiefiles.com and find this icon (Hamburger Menu to Back Arrow, by Darren Samuels) 

(01:09) 

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)

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)

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)

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)

Conclusion

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.