GSAP FULL-SCREEN MENU (OFF-CANVAS) - Elementor Wordpress Tutorial Flex Container

[@gaetanosorangelo4550]

Awesome! Great Tut and it works more than fine! I tried to study how to launch the "closing menu animation" also when you click on the menu voices... but know no good result🤣! But I changed the toggle button in "MENU" when closed and "CLOSE" when the menu is open! LOL

[@kamessytta]

I'm your fan too! ☝️☺️👏👏👏👏🥰

[@andreaegli]

🥳 whoop!

[@Daniel.M.Trapanese]

Me too!!!

[@andreaegli]

@@Daniel.M.Trapanese

[@capitannikolai]

Hi Andrea! awesome tutorial

[@andreaegli]

Yes, you should be able to use Lottie but of course, you need to make some code adjustments

[@godsamita]

Hi Andrea you are my best way to see life haha, tellme that work responsive in smartphone?

[@andreaegli]

hahaha, hey! It is indeed, you can have a preview here: ohwow.club/template/

[@thewebstylist]

Fantastic! Curious if you sell your amazing creations? It would be so great to have a purchase link to each of your ‘products’ in every video description

[@andreaegli]

Thank you🤓 I do actually, there's a link in the description of this video for that: ohwow.club/template/ More templates will be added in the near future

[@heatboven]

Hey Eli, thank you for sharing this tutorials with us. I have purchased the template for this menu, but the menu does not open up, when I click the toggle button. I have just inserted the JSON file and did not changed anything. Hope you can help here :-) Greets!

[@andreaegli]

Hey! You’re welcome! Thanks for the purchase, can you send me an email so I can better follow up on this? Also, please include the link to your project where you have inserted the menu 😉 in the meantime, do you have set a z-index on the container you have inserted it?

[@heatboven]

@@andreaegli Done :-) Thank you for the fast response!

[@dobrystudio]

I am also a big fan!

[@teuccio73]

superrrrrrrrrr!!!!

[@andreaegli]

🥳

[@user-hl5vm5wo7m]

Hey Andrea, Where do you get all your codes from.donyou code it or source it from some website? One last question please show how to optimise some of your designs for mobile responsiveness. Love your work and keep uploading good videos.

[@andreaegli]

Hey! From all over the place and add my own twist to it, most of the times I need to code some extra stuff to make it work in elementor. Sometimes I do code from scratch. I wish I had more time for that but in general mobile responsiveness is all about stacking elements so, I don’t think is that hard. I created templates (more will added soon) of my most popular features/effects/ designs which are mobile responsive. Have a look on oh wow . com under templates/shop Thank you so much for your support 😉

[@jubin9730]

I have an issue where on page load the opened menu is shown very briefly, do you have any idea how I could solve this?

[@andreaegli]

Can you send me the link to your project so I can have a look?

[@viveksaini9809]

Love this menu but its not worked for everyone without having Sub Menu Item. Can you suggest how can add Sub Menu Item in it. Pls help ❤

[@andreaegli]

Thank you 😊 for now this menu is generally built for simple menus without submenu items. Maybe I’ll look into it in the future to see how this can be implemented for the latter use case

[@viveksaini9809]

@@andreaegli ok thanks for your quick response. I hope you will soon create a menu like this with the option of sub menu items. Waiting for your video ❤️

[@ar_dani_]

oh damn everytime you upload smth i want to add it to my website 😂😂, i will never finish it

[@andreaegli]

😂 I feel you, I do this to myself as well! I think this menu is going up on the new studio website tho

[@lidamashhadireza]

Hi,why is there no close menu button? Is it not in the code?

[@andreaegli]

What do you mean? There is one, you probably skipped the video. Everything you need is there and if you can't make it work, you can always purchase the template

[@brokaccess]

I’m your fan! ❤

[@TheBlopog]

Hi Andrea, cool tutorial. Everything work fine but I have a "elementor red" background color on my burger icon when i'm hovering it and when it's active. Do you know how can I change the color and the background color of the burger icon ? I saw you said to replace the .elementor-icon-list-text with .elementor-icon-list-item everywhere in the GSAP/JS code but it didn't worked for me. I'm using Hello Elementor theme. Thanks !

[@andreaegli]

Yup, that happened to me too 😉 go to site settings > typography > link > hover and turn the color down to transparent (this will affect all your links tho) OR add this to the code: .burger:hover { background: none !important} . Add this to .burger:focus too { background: none !important} . Hope this helps

[@TheBlopog]

@@andreaegli Thanks it worked !

[@andreaegli]

@@TheBlopog

[@Superliga_Saladares]

Hola Andrea, me gustaría cambiar color de la hamburguesa, cómo se haría?

[@capitannikolai]

Hi again! :D I've already didcthe entire menu and it looks so cool, but I have a big last question: when menu is active, and by mistake scroll it, the X button and the logo scrolls up... I searched a lot a way to keep sticky just when is active, but I can't get it!

[@andreaegli]

Hey Nicolas! Nice! Ok, that one is easy: set the container to fixed and the vertical orientation to %. If need be, set a z-index on the container too. I would go as high as 9999 just to make sure that it is always on top of everything you have on the page ;) hope this helps!

[@pydigit]

You didn't tell the starting part what plugins and theme you install. I am not getting options like you are 😃

[@andreaegli]

Hehe, ok! For future reference, I always use the hello theme and elementor pro. I also have activated the feature ‘top bar’ in elementor settings. Hope this helps 😉

[@Shorticulous]

Hey Andrea! For some reason, the burger icon gets a blue background when i hover over it and makes it impossible to open and close the menu. How can i fix this?

[@Shorticulous]

Also this affected all of my other icon lists as none of them are visible now and only reappear once the menu is opened.

[@andreaegli]

What theme are you using? I’m asking this because the hover effect happens with the hello theme but there is a fix for it, let me know what’s your theme. As for the icon list not being visible, let me see if there’s a solutions for it. You could use the WP Menu widget in the meantime 😉

[@andreaegli]

Ok, replace the .elementor-icon-list-text with .elementor-icon-list-item everywhere in the GSAP/JS code.

[@Shorticulous]

@@andreaegli Im using the astra theme and the blue bg seems to appear only on mobile. Plus, i changed the text to item in the code but it didnt have any effect on the not visible item lists.

[@TheGoncaloSa]

Great video!! Just a quick one: is it just me or the menu doesn't seem to work on Safari? It stays inside the parent container and doesn't fill up the screen. I've added -webkit-clip-path to the overlay and webkitClipPath to the JS too, but it still won’t function. Any ideas? Thank you 😁

[@waelajam9627]

Great, but I hope you don't forget the motion page🙂

[@andreaegli]

Thanks! I might make a few more motion page tutorials but doing things without plugins is priority on this channel. Motion page is too expensive for many ;) what would you like to see made with motion? Give me some ideas...

[@waelajam9627]

@@andreaegli I will suggest some to you in the future. Thank you for these interesting videos

[@jaklinalevi]

Thanks, Andrea! It looks great. Now I'm trying to make it but i have some issue. When I try to add on the icon list those internal URL, when I type 3d and the other.. nothing appear and I don't know why :( Does anybody know why?

[@andreaegli]

Hey! You are very welcome!!! Oh, that’s just how one of my internal links is called 3d carousel….you need to type in your own link/page name that you want to link to 😉 hope this helps

[@jaklinalevi]

@@andreaegli Oh, now I understand 😁 thank you 🙏

[@andreaegli]

@@jaklinalevi You are very welcome

[@nono-t4o]

I have an issue where when clicking in the burger button it stays in red even when i don't have the mouse over the button

[@nono-t4o]

I fixed :D

[@ib4112]

did you try to give thi sdeefault letter spacing like below as it could be css override issue by elementor .elementor-icon-list-item:{letter-spacing:2px !important;}

[@evangretz]

I love you ❤

[@andreaegli]

😊

[@Yannick.D]

It does not move / interact anymore because the value 8 is the same entered in the css code. 12:12 .elementor-icon-list-item:hover { letter-spacing: 8px; transition: all 0.5s ease; } it wont move because it already is.

[@andreaegli]

True but if you lower one of the values, either in the css code or elementor, the effect does not work

[@Yannick.D]

​@@andreaegli maybe it is because elementor is fidling with the option all of a sudden thus maybe by adding !important in the css code ? or by doing eveything by code like this .elementor-icon-list-item { letter-spacing: 8px; transition: letter-spacing 0.5s ease; } .elementor-icon-list-item:hover { letter-spacing: 15px; }

[@Yannick.D]

best to give it a class or an ID to target only the menu : )

[@andreaegli]

@@Yannick.D yup, will try a few things 😉

[@Yannick.D]

@@andreaegli got it to work .elementor-icon-list-item { user-select: none; cursor: pointer; letter-spacing: 8px; transition: letter-spacing 0.5s ease; } .elementor-icon-list-item:hover { letter-spacing: 15px; }

[@pabloamerio5513]

is this elementor pro ?

[@andreaegli]

Yes, you could do this with elementor free but you need a code snippets plugin

[@jarofcherry]

If you have created a tutorial, make it easy for everyone to follow. Don't skip any of the conversion steps. Just because you understand them doesn't mean everyone else does. Don't skip explaining the top and bottom rearrangements when adding containers. Regardless of your assumptions about our understanding, be sure to explain everything carefully. In the tutorial from the link below, you will find that each step is explained carefully and not skipped at all. That's the kind of detail we need. Now, how do we understand the chain if we often skip over the detailed steps? If you want students to learn effectively, don't be superficial. Explain everything carefully. Check out the link below. For others, learn how to explain in detail step by step so that people can understand. Study it. kzbin.info/www/bejne/g2exk56EmrSEZ5osi=yvd9xvg6UesLa0Bz

[@andreaegli]

Thanks for your feedback! Let me break it down: Firstly, the video you referenced is 3-hour-long. Of course, it goes into detail step by step. Secondly, most folks watching aren't looking to become students-they just want a quick tip or a cool trick. If I wanted to teach a full course, I'd make one, simple as that. Thirdly, I'm not starting from square one here. If the video doesn't cover what you need, it's cool to move on. Fourthly, everyone's got their own style, but that doesn't mean you can knock a creator's hard work just because YOU are not getting what you want. Putting together content, whether it's five minutes or twenty-five, takes serious effort AND I don't cater to everyone. Having said that, we're here for you whenever you need us!

[@gaetanosorangelo4550]

I think that this kind of content is a pill as well as an exercise in style to be customised through study. Certainly this content is not aimed at those who have no basic knowledge of either WordPress or Elementor and to make a tutorial explaining the basics of html, css and javascript is a minimum of 10 lessons' work, if that. I have been using Elementor for about 6 years now and many things are still a mystery but I study what I need from time to time. I have been following Andrea for a long time and I have asked her many things that were not clear to me, she has been willing to explain them to me. Not for everyone making KZbin video tutorials is the main job, it often takes a lot of time away from other things. Let's not forget that everything taught here is free.

[@lethabomashike]

And I wish I was your OnlyFan