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);
}
Hello ! Thank you for the guide. There's a minor problem though... The "close" version of the hamburger does not work
Are you certain you got the URL for the 'toggle' action, and not 'open' ? That's usually why closing won't work.
Maxime Desrosiers Yes pretty sure about it...
Kevin Graziani I would need to see the page to find out the problem!
Maxime Desrosiers yes of course, I'm gonna send you a DM because the website is not online yet and you need credentials to enter in it
Hey! I can't copy the html from the Hamburger Icons? I tried to open them with a text editor on Mac but I only get a empty document. When I open in browser it does open as a hamburger icon. What do I do wrong?
And where can we download the other html stuff? Or do we need to retype everything?
Brian Roger Andreas Everything is included in the HTML files. You went about it the exact right way! Not certain why the text editor didn't show properly the content of the HTML though.
Try another text editor, or try opening the HTML files in Chrome, then clicking on CTRL-U to see the source code.
This is really great stuff, thanks so much for it. Is it possible to change the color of the hamburger?
(I tried changing the color in the main css list but it didn't seem to do anything)
Stefan Roberts Hey Stefan! You are on the right path. You will find a few 'background colors' in the code, just change those, it should work!
Hi! Thank you so much for the tutorial. I have followed every step and the pop up is working but I cannot trigger the animation.
Hey Elia! I could not say why. Would need to see the page....
Awesome! Thanks for sharing. There was a little glitch using <button>: if you don't click the hamburger directly the animation worked but would not open the popup. I chose to just apply the classes directly on the link and get rid of the button:
<a href='#elementor-action%3Aaction.......' class="hamburger hamburger--spin">
<div class="hamburger-box">
<div class="hamburger-inner">
</div>
</div>
</a>
Yes indeed, you are right! Thanks for sharing!
Hello. Everything turned out fantastically instead of a horrendous glitch. The button (HTML) is in it's section, on the right column, section's Z-index 99999. HTML's Z-index also set to 99999. Now when touching the button works as expected but after the popup is closed via button, you are unable to scroll down the page. If I close the pop up by clicking outside it, everything scrolls fine.
What do you think mcould be the problem?
I have got the animation to work and the popup opens. But it does not close again... the hamburger shows close animation though. Also how to change the color of the close version of the hamburger?
http://www.easycashforcars.nz
Luke Allen That's a bug with Elementor Pro popups. See this: https://elementorcodes.com/elementor-pop-ups-problems/
Luke Allen For changing the color on hover, check the CSS code for the hamburger. You will find this
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000; }
Change the color there!
Thank you for this, really great stuff. Though i cannot bring the animation to work. Would you know why?
http://www.rizewithus.de
It is because you have the exact same JS twice on the page. If you want more than one instance of the icon, copy paste ONLY the HTML part. The CSS and JS part should only be present once on the page.
Thank you so much, that works just fine. But it leads me to another problem you might be able to help me with. Somewhere in the process elementor decided to add my header on top of my already existing one. Which led to the case of the doubled CSS and JS. Also i cant edit the header on my page editor, it just is there. If i hide every element through the navigator it still will stay there, i cannot grab it or delete it. Im going furious for the last 3 hours and maybe you could help me with that. Thank you very much and keep on the great work!
I fixed it, thank you nonetheless 😀
How to avoid that the hamburger icon is using the global button colors of elementor?
Add !important in the CSS, here:
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000!important; }
And here:
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000!important;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
Hi Maxime,
Added !important, still getting the black background from site settings in the element.
Hello! your animated menu is very useful and functional!
can I have the same thing with only two lines instead of three in the menu?
thank you so much
dont appear the closing X button when popup open
Probably some Z Index problem. It can be difficult to make it work well, as many things can easily break the z index properly working... I'd need to see your page to know what the problem is.
Maxime Desrosiers having the same issue, last bits.. would be happy with some help too.
Hi, I'm not familiar at all with html and kind of lost at the point where the hamburger menu is visible.
It opens the menu - but there is no "close button" to close the menu.
What am I doing wrong?
Please help me, I'm almost there.
Also, is it possible to insert the logo on the other side? Or is this not working then?
Finn Trigo Hey Finn! Probably some Z Index problem. It can be difficult to make it work well, as many things can easily break the z index properly working... I'd need to see your page to know what the problem is.
Yes, you can insert the logo!
Maxime Desrosiers If you want to take a look at it, I'd be very happy. Again I'm just begging and I am happy for every help I can get to create an awesome website! So dm me, if you find the time.
Hello, thanks for the code it is awesome!
Is it possible to be closed only on button not on overlay?
Because if I click somewhere else than button animation don't change and popup close
This is in your popup settings... disable the option to close the popup on clicked out of it.
Hello, thanks for the tutorial! it works great but the close button is not closing it.
i use the toggle url, and i check the other comments here regarding this issue and still it's not working.
maybe somthing has changed now? Elementor is updated to the last version.
hope to solved that issue 🙂
Hi, I love your tutorial, is it possible to create with the lottie widget, as it has the click option, but the animation does not work in reverse when clicking outside. Is it possible to edit it with JavaScript to make the animation work?
I would like to hear your opinion ????????????
Hey Smith. Yes this is possible, however I would recommend agaisn't it. This would make every page of your website depending on the lottie.JS library, which is relatively heavy... not great for performance. Better to find a CSS icon that you enjoy!
Hello! Thank you for the fantastic tutorial 🙂 I have got everything working just the way I want .... however ... my client is saying that on PC and certain browsers, the burger menu and the close icon don't quite line up. They are being very particular about this with the industry they are in, and want to know what I can do to adjust things. Is there any way to contact you by private message to send you a link and ask your advice?
Hello Melanie! Yes you can send me a message through Messenger, or by email (see the footer of this website) !
Hejo!
Great tutorial – thanks!
I just have one weird glitch.. Whenever I click on any other button ony ma website, the popup shows up.
I get forwarded to the right destination, but in between the "mobile menu" popup appears.
What can I do?
Thanks in advance!
oh, and:
when I navigate back with the browser, the pop up appears.
Hi,
The close button doesn't appear, I've tried it with z-index but it doesn't help unfortunately. How can I solve this?
Thanks!
Consider this premium tutorial to help you with this : https://element.how/elementor-full-screen-navigation-templates/
In short, there are many reasons why you might have problems with the z-index stacking contest, and why it will show below your navigation. This will often happen with sticky navigation. In the premium tutorial, the templates are structured in a specific way to avoid this problem. This information isn't part of the current tutorial because it's intricate and requires templates and video tutorials to show and explain how to make the header and make it all work.
I copied and pasted the HTML for the animation but it's not working for me 🙁
Could you share your page with me?