Create an Animated Hamburger Menu in WordPress using Elementor | Elementor Mobile Menu

Create an Animated Hamburger Menu in WordPress using Elementor | Elementor Mobile Menu

✅Contact me for any WordPress related Project:

✅Get Elementor Pro:

✅Get Domain & Webhosting(SAVE 50%):

✅Get code snippet for Animated Hamburger Menu:

✅Get creative templates on my Template Shop:

In this tutorial, I’ll show you how to create an animated hamburger icon in Elementor.

Normally in Elementor, when you create a menu, the hamburger icon has no transition. It immediately changes from the hamburger icon to this close icon. I’ll show you how to add a smooth animation between these two icons. And how you can make these icons to look more lighter which is better than the default bold icon. And for this you don't need any hamburger menu WordPress plugin.

First, we have created an header and inside the header we add an Elementor menu. We have do some styling on the desktop and tablet to make it look better.

For mobile, we enable the hamburger icon with an dropdown mobile menu. Then, we have also design the Elementor mobile menu. Finally, we paste some custom CSS code to transform the normal hamburger menu to an Elementor hamburger menu animation for mobile. You also have some option to customize the design of your animated icon of that Elementor responsive menu.

If you enjoy this tutorial then don't forget to like and subscribe.

[zay]

*:focus {
outline: 0 !important;
}
to remove the blue highlight border on mobile ..

[berleybruny]

Hello, i added the code but now it adds the hamburger menu to the tablet also, how can i make it for mobile only?

[Jay-vuzt]

Hi, I sent you an email recently but haven't had a response. Do you know why this is no longer working properly with the latest Elementor updates? Thanks

[patrickvalmont]

Great guide and very detailed. Using the default elementor nav menu, unfortunately, it does not work.

[Bayazid-Bulbul]

It works. thanks. I want to make the line edge rounded. How can i do it?

[FShexa]

Needs to be updated. Doesn't work with the latest Elementor update. Please revise. Thanks

[x-mode]

Hey brother please make a video on how to change the hamburger menu icon using this default menu settings, without using any popup.

[SuperABOALAA]

thank you but when i click on the menu a blue box appear for a second any suggestion in how to solve it ?

[royaliptv]

it's for Pro version, please mention that on title

[tripagood]

Thnk you very very much !!!! I search this for month

[MatthiasRuhe]

Thank you so much for your tutorial! That helped me a lot!!!

[marketingmig]

I have tried you suggested way, but when it comes to mobile responsive setup - it does not work. Also, when I try to adjust the column %, it does not change anything. It always shows 50-50. If I try to drag it to adjust - it all gone messy. Can you please advise why lementor behaves like this. Is there settings or any mistake i've done?

[boomshakalaka]

hello I have a problem if u can help me .like in the video 4:30, I have set the breakpoint to only mobile <800, but on the tablet mode my navbar still become the Hamburg style, only if when I drag the width to more than 816 it became the normal navg bar, but I can't find any setting to change this .help thx!

[JaiminThakkar]

Can we make full screen menu like that? I had tried by placing button and creating popup and then linking that popup to button. But that only works until we don't have submenu items for navigation where we had sub menu items they down's works. Let me know if you have any solution, that will be helpful to me.
Thank you

[Dudeske]

Thank you for the tips. Do you have any others snippet code to create some nice CSS animations ?

[Photovintageguy]

Do you have a video for the Popup menu part.

[viveksaini]

Sir you create a horizontal menu for desktop view & Drop-down menu for Mobile view and using custom CSS for the mobile hamburger icon to change the icon animation.
I want to create a Drop-down menu (Hamburger Menu) for both desktop and mobile using Popup and want to animation hamburger icon when you clicked on it as you shown in the video, i am trying your CSS code which you provide in the description of the videos but not work for me. Pls help me sir how can I do this in popuop menu. pls reply sir.
Thanks in Advance.

[PintoTV]

Hi,
I'm using the new version of Elementor 3.9.1 and when i'm pasting the code the hamburger menu icon stay + the menu icon from your code is there too, how i can disable Elementor icon menu & have only the one from the code?

[boal]

Great, thanks a lot. Question, I use popup menu that I built with elementor, is it the
possible to apply this anination on
The trigger button?

[RWatkins]

Do you have the custom css for this animation if using pop up meni