Get An Awesome Animated Elementor Hamburger Menu Icon

No extra plug-ins required! Elementor Pro required.

elastic

spring

collapse

stand

arrow-r

arrowalt

arrowturn

arrowturn-r

arrow

emphatic

glider

spin

vortex

ebxy

ebx

eby

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

Download files here : 

To begin with, create your pop-up menu

You wil want to turn off the Close Button

Animated Icons! Change the Elementor Hamburger Menu Icon

When you got it looking perfectly for all viewports, save and set condition to 'Entire Site'

Animated Icons! Change the Elementor Hamburger Menu Icon

Now, go in any page created with Elementor and add a button

This is only to find out what the toggle URL is.

Select dynamic conditions, Pop-Up, and then Toggle. Select your menu pop up.

Animated Icons! Change the Elementor Hamburger Menu Icon
Animated Icons! Change the Elementor Hamburger Menu Icon

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

Animated Icons! Change the Elementor Hamburger Menu Icon

You should get something like this

https:/elementorcodes.com/awesome-hamburger-icon/#elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjI4NzQiLCJ0b2dnbGUiOnRydWV9

Keep only this part. Save it somewhere

​#elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjI4NzQiLCJ0b2dnbGUiOnRydWV9

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

This might be in your header template, if you would like this on every page.

For optimal results, place it in it's own section, with an empty column on the left

Set this section z-index:99999 . Set the left column to Column Width (%) 91% for desktop, 89% tablet and 74% mobile.

Create a Wonderful Elementor Full Screen Menu​ Easily

To get the icon exactly where you want, use negative margins on that section.

Copy all of the HTML from the corresponding file to this HTML element

Download files here : 

Animated Icons! Change the Elementor Hamburger Menu Icon

Edit the html to add your pop up address like this

Animated Icons! Change the Elementor Hamburger Menu Icon

Finally, set the z-index of this html element to 99999

Animated Icons! Change the Elementor Hamburger Menu Icon
full z-index not shown here. 99999 is the value needed

Important: this z-index value won't be valid if any container of the html element has a lower z-index value set up. (ie if the section's z-index is 99)

et Voila! Should work just fine!

A few adjustements might be needed for your particular setup, how and where you want this to appear, colors, etc. Play with the CSS included in the html Element!

Thanks for reading! Lots of work went into this article, let me know if you enjoyed!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

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