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
Note before you start: I don't actually recommend using a popup for a menu. It is not good for SEO. The content of the popup is NOT a part of the DOM, so the search engines won't see and index it properly.
Follow this tutorial about creating a full screen menu with Elementor for a better, SEO friendly way.
You can still use the idea presented in the current article if SEO isn't a priority, or if (at the very least) you have a normal menu for desktop, and are using this for mobile only. Search engines will see the desktop version properly.
Back to the tutorial.
You will want to turn off the Close Button
When you got it looking perfectly for all viewports, save and set condition to 'Entire Site'
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.
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/animated-elementor-hamburger-menu-icons/%23elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjI4NzQiLCJ0b2dnbGUiOnRydWV9
Keep only this part. Save it somewhere
%23elementor-action%3Aaction%3Dpopup%3Aopen%26settings%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.
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 :
Edit the html to add your pop up address like this
Finally, set the z-index of this html element to 99999
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!
Notably, to change the size of the hamburger, add this CSS, and change the '0.9' value to fit your requirements!
.hamburger {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
