FULL-SCREEN MENU (OFF-CANVAS) with ANIMATED BURGER - Elementor Wordpress Tutorial Flex Container 

Is this cool or is this cool? Let me know what you think!

Really sleek menu and beautiful outcome. Nice technique and smart way to do it. Thanks for sharing this. Thanks a lot!

Thank you so much for this amazing content!

Beautiful menu style indeed

I really needed this! i didnt know what was the proper way to do mobile menus for elementor, (hate to use popups)

This is GREAT! Thank you!!! I do have one more question - how can I put a sub-menu under, for instance, "Work"?

Maaaaaan, you are so fking awesome. Good job, you are extremely inspiring!

Hey Andrea! Great tutorial. Is there a way to make the menu animation fade in down?

Thank you very much for the video, it was very helpful. Is there a way to make the container transition 3 seconds? I tried to change the value, but it doesn't work. Thank you very much.

love the menu, but have a question, how could I make the text menu change color with the burger button when checked? and change the font of the text too ?

Very cool that you created this without a popup! And thanks for mentioning the NAV class for SEO. Do you have any idea on how to prevent users from scrolling? I know this is against the concept of the left container with the glass effect but especially on mobile devices (or if you just want to have the menu without the image on the left) you can open the menu and scroll through the whole page which I wanted to avoid. I basically wanted to copy your menu from elsi-gartenservice from the functionality. Sorry for that. 😅

Thank you very much for this tutorial ! but I don't understand why I don't have "text-indent" in the icon-list widget

Andrea, great tutorial. Thank you very much! In the mobile version, when I click on the desired item, the menu doesn't close/hide. Is it possible to set up this feature? Could you help me with this, please?

Hey Andrea, first of all thanks for your great tutorials and sharing all that stuff with us :) I have a similar question as @multa7053. I don´t want to have a fixed menu as it does not fit my page. Without a fixed menu the close button scrolls off the screen as soon as someone scrolls on desktop or mobile, and you are not able to see the close button anymore as long as you scroll back to the beginning. Is there a possibility to put the close button into the sliding menu? So that you press the hamburger and in the container that slides in, there is a own fixed close button, that does not scroll of the screen, so that you can close the menu even you have scrolled a bit. Thanks for your help! :)

hi Andrea, thank you for this tutorial! Very appreciated :) For me i had to make sure my main container on the off canva menu was 100vh width and height since i had issues with the section not going full screen for some reason

Hi Andrea, thanks for the tutorial, I still have issue to display the section with the id in elementor free even I get the template Id. Is there any solution. Tnks in advance

Is there a code, if I want to change the color of both the toggle and the word "menu" when they are both active? and then the color returns to the normal when the popup is closed?

Hi, I don't know how to have the section part in fullscreen (when you construct/made your section for the menu). For me it's work like a normal section in a page, contain in the canva of the theme, with sidebar... Even if I choose in the general setting to always use "elementor canevas". The theme I used (generate press) always take the top... Thanks in advance.

Good morning Andrea, I follow you since I change VC for elementor and I am facing your super simple and easy videos, I like to follow step by step everything to do to learn how elementor works, now the question I want to ask you It is regarding the output of the menu, I explain, when you click on the hamburger in menu enters from right to left and, when you click A for example to contact, I want you to do the reverse route, and from left to right that is, the reverse sense, I hope you take this doubt in order to make this effect. thank you so much Best Regard

Thank you amazing content. How can I replace the icon with another icon? Which piece of code should be changed?

Hey Andrea! First off ❤❤❤ your style of tutorials. Very easy to follow and straightforward. This and Web squadron are my go to channels when I’m stuck on anything elementor. I’ve followed this one and I think I’ve pretty much gotten through it as when testing it all is there. However I seem to have an issue with the following comment being displayed on the right side of my menu (making it not full screen but centered box - think it’s being pushed by the comment) “ (change the number of the template with your own) “ I think it might have been a piece in the code that wasn’t formatted properly, so I removed wherever I saw this part in any of the code. Howe ever I think I’m missing something still as it’s still displayed…. Ps. I did change the template with my own 😊 and it does work on my test page perfectly. Just the annoying comment that flies out with the menu once toggled. Hope you can help me out a little here as it does look very very nice.

Love u❤ from chile

Hello and thanks for tutorial! Anyone have a solution to have the menu closed as a user goes back to previous page? For example: - I'm on homepage -> Open menu-> Press a link for example to Contact page-> when I go back it goes to homepage but the menu is open. It's a little confusing for the user. Thanks!

How do I change the direction the off canvas menu flys in

Hi i need help my shortcode in html dont work. Display only text.

Hey Andrea, is there any way to change the font of the "menu" button next to the burger?

why I cant see these much types in templetes? I just have landing page, section and container

Does anyone have a problem with their site logo and button links? I created this menu and placed it next to my site logo and button in my header but their links doesn't work anymore. Only the menu links are working.

Hi Andrea! 👋 :) May I ask: How do you change the color of the hamburger icon? In the CSS adjust the color code does not work. Also tried to add a style tag in the html. does not work either. It would be such an awesome menu! (like all your creations 😊) But I need it in black 😂

HI @andrea i have tried your method, but i will clicl on the burger menu its just showing the short code off-canva menu, I am using the twenty tweny theme

You are my new found angel

I love You😍

Hi Andrea, I might be wrong, but shouldn't the nav tags include a list of pages? Also, how would you add a sub-menu list to one of the icon? (for ex: The Services option that would trigger a list of 3 different service pages). Thanks! Menu tutorials for Elementor are rare and so important.

Where do you get your image? (exactly this type of 3d scene)

Hi Andrea, I have created header through Elementor header & footer plugin even though I created it in templates but there i couldn't see the shortcode, So I used shortcode from Elementor header & footer plugin, but I couldn't see the header instead it showing only the shortcode ([hfe_template id='76']). Please help me to fix it Thanks

wonderfull video. I have a little problem. If i do it like you - all my buttons expand on hover and all other icon lists do this as well? How can i fix this?

I have created a mobile menu with yout method and for me it does'nt work( I couldn't see the header instead it showing only the shortcode [ ]. My theme is "Hello Theme" and i use elementor pro. Help me please

It doesn't work the code, i use the free version with the plugin Royal Addons to add Custom CSS but it doesn't do anything :(

Mam how to add a submenu. Plz help me

Hey Andrea, do you know what could be the reason for the menu not closing automatically after the section in the menu has been clicked? I seem to be overlooking something I think...

The good old checkbox hack... I would prefer JS with a simple ToggleClass though. People who don't know HTML will get an error message when they leave this part in the code: (change the number of the template with your own) You better comment it: Keep up the good work!

but if we make this by popup then it's mostly time the menu is not open

I don't think the Elementor popups are real html popups.. (the ones you mention being blocked by some browsers/extensions), it's just a name Elementor gives to it

I'm bit confuse about how Google will know this is website menu or navigation? I think this is not good for seo.

Why does your Elementor UI looks different?

Without popups is the way to go. I see a ton of tutorials with off canvas popups to create menus, but what a ton of individuals don't understand is that they are at risk to lose tons of users who block popups and as result won't be able to see the menu.

95% there, the slideout off canva menu is showing boxed not full width. Even though I have that template set to full width. ??

👍👌👏👏👏😊❤️

hello the souce code link no longer works

hmm. For some reason it didn't work for me.

IDK why , but it doesn't work to me, the menu is not a full screen, the menu is center

The animation isn't working

The most confusing RU-vidr