Elementor Animated Hamburger Menu Icon For New Off Canvas

In this tutorial, you will learn how to use one of these great hamburger menu icons to toggle on and off your Elementor Off Canvas element.

You will be creating your own Elementor animated hamburger menu icon, and you will be able to customize the CSS to have your own colors and styles.

No extra plug-ins required! Elementor Pro required.

The hamburger icon collection is available for Element.How's mailing list subscribers.

Sign up for free now

All the credits goes to Jonathan Suh for the icons. I only adapted them to be Elementor ready.

To begin with, create your off canvas element

We used to use elementor popups for this, which I recommended against as it is not good for SEO. Now we don’t even have to worry about this anymore, and we use the new, SEO friendly Off Canvas element.

Add it to your header template and set up its content as you wish.

Now, and add a button, click the dynamic icon and select Off-Canvas

We are adding this button only to find out what the toggle URL is. We will be deleting it after.

Select Action: Toggle Off-Canvas, then select your Off-Canvas.

Then, view your page from the front end, and right click the button. Click 'copy link address'.

You should get something like this

https://element.how/#elementor-action%3Aaction%3Doff_canvas%3Atoggle%26settings%3DeyJpZCI6IjFmMTI0NGEiLCJkaXNwbGF5TW9kZSI6Im9wZW4ifQ%3D%3D

Keep only this part. Save it somewhere

#elementor-action%3Aaction%3Doff_canvas%3Atoggle%26settings%3DeyJpZCI6IjFmMTI0NGEiLCJkaXNwbGF5TW9kZSI6Im9wZW4ifQ%3D%3D

You can now delete your button element.

Now, add an HTML element where you want your hamburger icon to be

This will probably be in your header template.

Copy all of the HTML from the corresponding hamburger icon to this HTML element

On this tutorial, at the start, right click > inspect the hamburger icon of your choice.

Then right click > Copy Element on this <div> that comes just above the <a href=”#” class=”hamburger”> :