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 : 

Download now

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 : 

Download now
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!

Tagged

89 Responses

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

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

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

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

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

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

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

      1. I solved it.

        document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
        $('.hamburger').click(function(){
        $('.hamburger--collapse').toggleClass('is-active');
        if ($('.hamburger--collapse').hasClass('is-active')) {
        $('body').css("overflow", "hidden");
        } else {
        $('body').css("overflow", "auto");
        }
        });
        });
        });

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

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

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

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

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

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

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

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

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

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

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

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

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

  20. Hey nice tutorial.

    If i scroll the popup i see that beneath the popup that the user can scroll further while having the popup menu open. I have enabled disable page scrolling but the Popup has still some space to scroll.. How to fix this?

  21. Another question: having the z-index on 99999 while creating another section to put the site logo in wont get get the priority click. I've tried to play with it a lil bit but couldn't get it done. Any tips how to fix this

    1. If z-index isn't working, here are two things to be aware of:

      First , try adding position:relative;

      That alone might fix it. If it doesn't , then it means a parent element has a lower z-index, so the child element's z-index is restricted by that. Try removing or increasing the parent's z-index.

  22. How do you align the Hamburger itself horizontally to the right inside his column? I would think that almost everyone needs to do this with this Hamburger. Any pointers?

    1. Under Advanced settings for the HTML element, you set it to width:inline.

      Then you set the column to flex-end, in the horizontal align settings.

  24. Hey! thanks for sharing this tutorial! I triggered closing the pop-up menu when pressing on one of the anchor navigation buttons but then the X stayed still so it's kind of funny. How can I trigger to change the icon again after pressing on one of the menu buttons?

    this is the script that closing the pop-up:

    jQuery(function($){
    $(document).on('click','.elementor-location-popup a', function(event){
    elementorProFrontend.modules.popup.closePopup( {}, event);
    });
    });

    1. If the popup is closed, you don't have a close icon anymore. You probably have some kind of custom setup... it's beyond the scope of my tutorial to offer support for any kind of custom setup, sorry.

  25. Hi Maxime!

    Cool tutorial thanks for sharing! And i works fine!
    Only one problem: after loading the page you can click anywhere on the page and the pop will open. you don't have to click on the hambuger icon. after that everything works normally only via the icon. The problem only occurs after loading the page. can you have a look! any ideas what the problem is?

    https://bach-holzbau.de/_2022/

    thanks!
    michl

  27. Dear Maxime,

    Thanks a lot for the tutorial. Just one question: you said that using navigation within a pop up is bad for SEO, because it is not visible in the DOM (I have seen your video and read your article). If I would just keep the desktop menu and set it on 'visibility: hidden;' and use a pop up for a mobile menu, wouldn't that just solve the whole issue, since the navigation does not disappear from the DOM and is still visible in the header?

    I'd like to hear from you.

    Kind regards,

    Klaas

  29. Hi Maxime,

    Great tutorial, thanks.

    I am using anchor links in my nav menu in the pop-up. When I click on one of those, the pop-up doesn't close. Any ideas how I could do this?

    I could send you the project in a private link if needed.

    Kind regards,
    Michel

      1. Hi Maxime,

        Thanks for the quick reply. When I add this code, the pop-up closes, but the icon stays an 'X'. It should become the hamburger icon again. Check out my page https://studiozebra.com/ for example menu item 'Contact'

  30. Hey Michel!

    Try this code instead, also added directly in the popup :

    <script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
$('.hamburger').removeClass('is-active');
});
});
</script>

  31. Hi Maxime,

    Great tutorial! Is it necessary to keep the initial icon that we used to copy the popup url? If I delete it after I added the url to the hamburger menu, it won't work anymore. I now hide it on all the devices, but I rather just don't have it in the code.

    Looking forward to hearing from you!

    Kind regards,

    Angela

    1. Hey Angela!

      No it's not necessary, however you need to have your popup conditions set so that it shows on the specific page(s) where you need it to.

      Cheers!

      1. Hey Maxime, thanks for the reply! I didn't receive a notification, so I saw it just now. It works with your advice, so thank you!

        I also have another question. My mobile header has 2 columns. One for the logo and one for the hamburger menu. When the popups open, I just want the container with the hamburger menu to be shown. But it's just all or nothing as far as I can see. Is this correct? Or am I doing something wrong?

        Looking forward to hear from you again!

        Kind regards,

        Angela

  33. Hi, I tried this and the animation works, but not when closing the popup (either by clicking the overlay or pressing Esc). Any ideas what could be wrong?

    1. Hey David!

      You will need add the following JavaScript to your pages (could be in an HTML element in your header or footer, for example) :

      <script>
window.addEventListener('load',function(){
    jQuery( document ).on( 'elementor/popup/hide', ( event, id, instance ) => {
	if ( id === 123 ) {
		$('.hamburger').removeClass('is-active');
	}
});
});
</script>

      Replace "123" with the actual ID of your popup!

      Cheers!

  34. Hey Maxime,

    I'm using this hamburger icon but something is going wrong with this site: http://www.kinderslaappraktijk.nl/home

    On the responsive version of the homepage the hamburger menu works fine (the menu is on the homepage itself and not as a theme header), but all the other pages (where I use a theme header) the popup menu won't open. But when I place an icon with the popup link, both icon and hamburger menu opens the popup. When I delete the icon, the hamburger menu doesn't open the popup anymore.

    I have no idea what's going on and was hoping maybe you have a clue.

    So I'm really looking forward to your reaction!

    Kind regards,

    Angela

      1. Glad you managed to solve that one! Thanks for sharing... forgetting these display conditions is quite common indeed, been there!

Leave a Reply