GSAP FULL-SCREEN MENU (OFF-CANVAS) - Elementor Wordpress Tutorial Flex Container
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- CODE: ohwow.club/how-to-build-a-ful...
TEMPLATE (Icon list widget): ohwow.club/template/
The template for the WP Menu widget will be released in the following days ;)
Timestamps:
00:00 Intro
01:40 Demo
23:23 Outro
Thank you for watching!
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 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
![[Watch Party] APL 2024 ใครชนะเข้ารอบ Hydra 🆚 Flash Wolves Talon 🆚 GGLive](http://i.ytimg.com/vi/BvuSgyLy4hA/mqdefault.jpg)
I am also a big fan!
I’m your fan! ❤
I'm your fan too! ☝️☺️👏👏👏👏🥰
🥳 whoop!
Me too!!!
@@Daniel.M.Trapanese
superrrrrrrrrr!!!!
🥳
Hi Andrea! awesome tutorial
Yes, you should be able to use Lottie but of course, you need to make some code adjustments
oh damn
everytime you upload smth i want to add it to my website 😂😂, i will never finish it
😂 I feel you, I do this to myself as well! I think this menu is going up on the new studio website tho
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!
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!
I love you ❤
😊
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
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
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 😁
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.
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 😉
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 !
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
@@andreaegli Thanks it worked !
@@TheBlopog
Great, but I hope you don't forget the motion page🙂
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...
@@andreaegli I will suggest some to you in the future. Thank you for these interesting videos
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;}
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?
Also this affected all of my other icon lists as none of them are visible now and only reappear once the menu is opened.
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 😉
Ok, replace the .elementor-icon-list-text with .elementor-icon-list-item everywhere in the GSAP/JS code.
@@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.
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?
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
@@andreaegli Oh, now I understand 😁 thank you 🙏
@@jaklinalevi You are very welcome
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.
True but if you lower one of the values, either in the css code or elementor, the effect does not work
@@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;
}
best to give it a class or an ID to target only the menu : )
@@Yannick.D yup, will try a few things 😉
@@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;
}
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.
th-cam.com/video/M6NbkNeOQ18/w-d-xo.htmlsi=yvd9xvg6UesLa0Bz
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!
is this elementor pro ?
Yes, you could do this with elementor free but you need a code snippets plugin
And I wish I was your OnlyFan