@daveden2 Took me while to figure it out though. But I can modify it to off-canvas, full screen and with staggered animated menu-items. I use a clip-path transition.
@@daveden2 no, I don't have one yet. I have a preview of full screen menu's on my channel, but back than I was using a different method. (result is the same though) The method is quite complex, but it works. The Elementor nav menu uses a transform scaleY transition to open and close the menu. Looks horrible imo. What Ii did is disable the transform (transform: none !important;) and i forced the element to show open in both open and closed state. Then I make sure the dropdown in the nav inherits the height from the nav. I also set it fixed. Then I use clippath to hide the menu when it's closed., the menu is open (but only visually) but it's clipped via clip-path. When you open the menu there is a clip-path transitionto make the dropdown visible. With clip-path you can animate in fascinating ways. I use inset, circle and polygon. For the staggered menu items... first I give each menu item a variable via an nth-child selector. First menu item is index= 0, second menu item index= 1, third index= 2 , etc Then I use ithat ndex number in a calc function with the transition-delay property. With this formula: transition-delay: calc(0.1s * var(--index)); 0.1s is the interval time between each menu item. I use a different formula for the menu items when the menu closes: transition-delay: calc(0.1s * (var(--length) - (var(--index) + 1))); -length is a variable that defines the number of menu items. You have to make sure that the transition delay for closing and opening the menu is different (that is possible), because when you close the menu, the menu stays open unitll the animations of menu items are finished. Hope that makes sense to you. It's complex for me to explain this in English.
This was driving me crazy. I had no idea what the border was on my button. When i finally figured out it was focusable element this video helped me fix the issue. Thank you so much for this.
Very good, the focus outline as applied to Elementor buttons was really driving me crazy; this clarifies what is happening and how to resolve it. Thank you!
What do you use to create your Mobile/Off Canvas Menus?
I modify an Elementor menu nav widget with custom CSS
@@franktielemans6624 yep, me too 💯
@daveden2 Took me while to figure it out though.
But I can modify it to off-canvas, full screen and with staggered animated menu-items.
I use a clip-path transition.
@franktielemans6624 Oh wow, that's really cool! Do you have a video explaining the process?
@@daveden2
no, I don't have one yet. I have a preview of full screen menu's on my channel, but back than I was using a different method. (result is the same though)
The method is quite complex, but it works.
The Elementor nav menu uses a transform scaleY transition to open and close the menu. Looks horrible imo.
What Ii did is disable the transform (transform: none !important;) and i forced the element to show open in both open and closed state.
Then I make sure the dropdown in the nav inherits the height from the nav. I also set it fixed.
Then I use clippath to hide the menu when it's closed., the menu is open (but only visually) but it's clipped via clip-path.
When you open the menu there is a clip-path transitionto make the dropdown visible.
With clip-path you can animate in fascinating ways. I use inset, circle and polygon.
For the staggered menu items... first I give each menu item a variable via an nth-child selector. First menu item is index= 0, second menu item index= 1, third index= 2 , etc
Then I use ithat ndex number in a calc function with the transition-delay property. With this formula:
transition-delay: calc(0.1s * var(--index));
0.1s is the interval time between each menu item.
I use a different formula for the menu items when the menu closes:
transition-delay: calc(0.1s * (var(--length) - (var(--index) + 1)));
-length is a variable that defines the number of menu items.
You have to make sure that the transition delay for closing and opening the menu is different (that is possible), because when you close the menu, the menu stays open unitll the animations of menu items are finished.
Hope that makes sense to you. It's complex for me to explain this in English.
This was driving me crazy. I had no idea what the border was on my button. When i finally figured out it was focusable element this video helped me fix the issue. Thank you so much for this.
You're welcome. 🙏
Very good, the focus outline as applied to Elementor buttons was really driving me crazy; this clarifies what is happening and how to resolve it. Thank you!
Thanks! Method 2 works also for the new off-canvas widget.
Oh, nice! Thanks for letting me know
Thank you!
Hi! Your channel is really useful. Thanks!
Your videos are great.
I'm following you from past 2 weeks.
Keep sharing amazing content.
Thanks for the encouragement!!! 🙏 💪
Worked!!! Thank you
Thank you man!
Thanks bro! I finally found it after 2 days!
Very good. Thank you. Just what I needed.
Oh, I'm glad the video helped you out!
How do you deal with SEO for your navigation links when using Elementor popup menus?
element.how/why-elementor-pro-popups-are-terrible-for-seo/
Great, thank you so much! Cheers from Ukraine.
You're welcome.
I'm glad you found the video helpful.
I hope you're keeping safe over there 🙏
Awesome , watching here with Emmanuel Agene. From Nigeria
Oh, cool!!! Say hi to him for me
thank you! top!