FULL-SCREEN MENU (OFF-CANVAS) with ANIMATED BURGER - Elementor Wordpress Tutorial Flex Container
Vložit
- čas přidán 10. 07. 2024
- Here's a cool full-screen menu with an animated burger menu 'icon'
CODE: www.notion.so/CODE-Fullscreen...
Timestamps:
00:00 Intro
00:41 Short show-off of the menu
02:42 Building the full-screen menu
17:05 Building the burger menu
25:29 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
Is this cool or is this cool? Let me know what you think!
This is very cool... Keep making new videos 🎉
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!
You are welcome 🙏
Beautiful menu style indeed
Thank you so much 😊
I really needed this! i didnt know what was the proper way to do mobile menus for elementor, (hate to use popups)
Maaaaaan, you are so fking awesome. Good job, you are extremely inspiring!
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 ?
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.
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 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
Hey Andrea! Great tutorial. Is there a way to make the menu animation fade in down?
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 I have the same ''problem'' the menu is nice but not in full width .. is it cause this is a section .. ? and you have to integrate it in manual mode in every pages of your website ???? but except that it is cool but right now I could not use it without full width.. possible to include it in a header ?
@@salimbelhamel_official hi, yup its a section type, full width 100vw and 100vh. i dont remember but you could try putting the html burger menu on the Elementor header template
@@MiStiQueT Hi, yep thank you .. I found the solution before your message .. but thank you very very much for your answer .. the problem after that was the icons ordered .. cause I don't know if it's a CSS code problem .. but my pages was really différents with icon small .. etc .. so even if it's a very nice menu hamburger .. I decided to cancel ..
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! :)
Love u❤ from chile
Thank you very much for this tutorial ! but I don't understand why I don't have "text-indent" in the icon-list widget
This is GREAT! Thank you!!! I do have one more question - how can I put a sub-menu under, for instance, "Work"?
Thank you amazing content. How can I replace the icon with another icon? Which piece of code should be changed?
Thank you so much! Have you managed to figure it out?
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.
Heeeeyyy!!!! thank you so much! Yes, please remove that comment :))) that's me trying to make sure that people change the template number with their own. I made the correction in the notion file too ;)
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!
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😁 I think you would need to add code to prevent the scrolling in the background when the menu is open. Why do you want to prevent that? I'm just curious🤓 as I see it, once they have selected the page they want to go to from the open menu, the scrolling of the page doesn't matter...ah, the menu on elsi was a widget if I'm not mistaken😅
@@andreaegli I just wanted to avoid scrolling as there's nothing more to see, on mobile and tablet. On desktop there's the second container in your example but I also wanted to remove that one from desktop devices. 😅 I tried doing it with overflow hidden etc. but I couldn't get it working.
Hey Andrea, is there any way to change the font of the "menu" button next to the burger?
Hey Ollie! try this: MENU
Of course, change the font fam with whatever you want (and all other style elements) but this should work...
How do I change the direction the off canvas menu flys in
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
Hey!make sure to add the required classes in the right places ;) I use the hello theme
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 😂
hey! Yes, look for these classes and add this, background: #000:
.burger-button .burger span{
background: #000;
}
.burger-nav_control:checked~.burger-button .burger span {
background: #000;
}
🤓
@@andreaegli awesome thank you! this was the 5th tutorial i used to create a hamburger menu. All have worked, but were always buggy. Now I finally have one that works properly 🤩 Thank you so very much!!
@@andreaegli I'm having difficulty inserting this line into my css, could you tell me where to put it?
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
Many thanks for the video. You don't disappoint! Please what is the name of the font used in this video
You are my new found angel
that’s something you don’t hear every day 😄thank you!
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?
thank you! remove this code snippet:
span:hover {
letter-spacing: 5px;
font-weight: 800;
transition:all 0.5s ease;
}
thank you so much@@andreaegli i did a mistake. i added a css id (megamenu) and than pastet the code like this: it seems that it works: #megamenu .elementor-icon-list-item:nth-child(2) span {
color: red;
}
#megamenu .elementor-icon-list-item span:hover {
letter-spacing: 5px;
font-weight: 800;
transition: all 0.5s ease;
}
#megamenu .elementor-icon-list-item span > svg {
padding-right: 3rem;
color: red;
/* background: blue; */
}
If you want only icon list to expand, add this: selector .elementor-icon-list-item span:hover {
letter-spacing: 5px;
font-weight: 800;
transition:all 0.5s ease;
}
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, 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
Hey Monika! What theme are you using? have you built the header and footer through the theme builder of Elementor?
why I cant see these much types in templetes? I just have landing page, section and container
Hi i need help my shortcode in html dont work. Display only text.
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...
hey! By section you mean a link?
@@andreaegli yeah sorry the link in the menu. For example “about us”
@@wellpal hmm, it should work for sure. Obvious question but did you add a link?
@@andreaegli hahahaha yeah I did (an anchor link) and behind the glass menu I can also see it jump to that section it (the menu) just doesn’t close upon selecting the menu item. Maybe i can send you the link by email to see what I mean. If not too much trouble ofcourse, I understand the content provided is already free and awesome so troubleshooting everyone’s issues individually will be ridiculous 😂
@@wellpal hehe, you are the first person to recognise that so, thank you so much for that but I'm happy to help if I can. Send it to me. Is it possible to add it to a WP sandbox and give me access to the backend?
Where do you get your image? (exactly this type of 3d scene)
All my images are from Unsplash
I love You😍
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
If you send me the JSON I can have a look
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.
Hey, Max! You are not wrong at all. I've used an icon list widget for that ;) The icon list has the ul>li structure which makes it perfect for this purpose. Since a lot of people seem to have questions, suggestions, issues with this off-canva menu, I think I will do a more in-depth video, most likely this week. I will try to find a solution to the sub-menu list too as I don't have an answer right now ;)
@@andreaegli Woah! Sounds good :) I'm still trying to figure it out.
I inspected an interesting website on last week. I see the devs created the website with Elementor and their fullscreen menu has 3 separated sections of menu (no sub-menu though), but everything stays within the main nav class.
Surprisingly, even though it's a very slick looking menu, they built it in a popup modal widget. I'll try different browser and browser extension today to see if the menu gets blocked.
Hi! im having problems with the color of the icons in SVG. There were ok and suddenly it went crazy and all of them black. Is there any CSS CODE to change them and avoid uploading multiples icons in svg with different names until Elementor STOP doing that crazy thing? jajaja :/ THERE ARE NO TUTORIALS ON CZcams... I have find one that upload 10 times the same icon until the software functions... can't believe that...
I'm bit confuse about how Google will know this is website menu or navigation? I think this is not good for seo.
I explain this at 18:57 . As long as you enclose the template in a nav tag, Google will recognize it as a navigation menu. The icon list widget works just like the nav menu widget. It is composed of ul, li, a, and span tags but it is enclosed in a div tag instead of nav. So, if you switch that in the html as I show in the video, it is all good. The burger menu is just a trigger. A classic nav is built in the same way, you add the nav widget into a container, in our case, we add the icon list widget in a container and we wrap it in nav tags. If you prefer using the nav menu widget instead of the icon list widget for this, you can do so.
@@andreaegli I would also like to use the Nav menu widget instead of the icon list widget. Unfortunately the hover effect on the font does not work. By the way, very very good tutorials. Please more tutorials inspired by webflow. :-)
@@michaeljauch-goppinger1122 Ok, I will play around with that tomorrow and let you know if the animation works (and send you the code if it does :)) Thank you very much will do!
@@michaeljauch-goppinger1122 Hey Michael! Ok, so here's the code for the nav menu animation:
nav a:hover {
letter-spacing: 5px;
font-weight: 800;
transition:all 0.5s ease;
}
@@andreaegli Thanks for your quick answer and solution :-) Respect and keep up the good work!
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!
hehe, yup! I agree, next one will feature a JS snippet
Oh yeah, I haven't thought about that. Sometimes I take people's knowledge for granted when I shouldn't
Will do!
@@andreaegli change the code with mine section code, still doesnt work
Mam how to add a submenu. Plz help me
but if we make this by popup then it's mostly time the menu is not open
Why do you think that would be the case?
95% there, the slideout off canva menu is showing boxed not full width. Even though I have that template set to full width. ??
Got it sorted out, had to take out the comment as it was not formatted as a comment, might want to fix that in your notion code.
Good to hear that you figured it out, John! Will do
iam also facing same issue, how do you fixed it?
Why does your Elementor UI looks different?
I have turned on Editor Top Bar in Elementor settings
@@andreaegli Thanks! I am used to make websites with Oxygen, and since the last 5 yrs with Yootheme PRO. I am pretty new to Elementor and I am not sure if I like it...
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 :(
Yeah it's normal, you need elementor pro to have the right CSS custom section :/
👍👌👏👏👏😊❤️
😉
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
hello the souce code link no longer works
Hey, it works on my end. Give it another try...
@@andreaegli hey MERCI BEAUCOUP
hmm. For some reason it didn't work for me.
What exactly didn’t work? Maybe I can help…
IDK why , but it doesn't work to me, the menu is not a full screen, the menu is center
I would need to see what you mean in order to help…
@@andreaeglihave you seen it ?
where did you send it? best chance for me to see stuff would be if you send me an email @@claraynesoncy2201
Did you find the solution? I'm facing the same problem
same for me
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.
The animation isn't working
It is, try again. I’m using this code on all my client project. You probably overlooked smth
@@andreaegli I did, step by step. Well technically the animation does work but without the “ease” effect. Like it just snaps into the extended text. Sorry I guess I didn’t word it correctly initially!
@@fahadhc hmmm, that’s strange, could be anything making this not work. Are you able to give me access to your backend ? If so, send it to my email and I’ll have a look for you 😉
@@andreaegli It works only the first time the page is loaded. After that unfortunately not anymore.
Very easy to test: Set the animation duration to 6s
The most confusing CZcamsr
Also the unnecessary talk and making the video A LOT longer than it should be