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

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://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.

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!

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);
}

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

45 Responses

    1. 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

  1. 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?

    1. 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.

    1. 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!

  2. 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.

  3. 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>

  4. 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?

  5. 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?

    1. 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!

    1. 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.

    2. 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!

    1. 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; }

    2. 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; }

      1. Hi Maxime,
        Added !important, still getting the black background from site settings in the element.

  6. 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

    1. 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.

  7. 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.

    1. 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!

    2. 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.

  8. 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

  9. 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 🙂

  10. 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 ????????????

    1. 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!

  11. 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?

  12. 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!

Leave a Reply