Glad this helps! The native nav has some built in accessibility benefits. Often I'll build a custom nav to get around some of the annoying style defaults of the native nav, and then recreate the accessibility features with code. But to keep this tutorial simple, I just used the native nav.
If no initial state is set, why doesn't it just use the size you set on the canvas? but sometimes it does, right? I've ran into this before, where I had to use a static measurement, but wanted the animation to be based on the size define per breakpoint - thus had to create a second animation for mobile. I don't know how you keep track of all these nuances lol
Something is set wrong for this to work on mobile. When you view it in webflow it displays correctly but when you publish and view on your phone it is 10x smaller. So small I thought it was missing until I looked at your example on my phone and saw the same shrinking. Thoughts on why this is happening and a fix?
Thanks so much for the heads up! This is from a bug with the way Safari handles flexbox. Removing the flexbox stretch styles and applying a height: 100% instead solved it. I just updated the cloneable to a fixed version.
Everytime I think of doing something, your tutorial is always on point.
Thanks so much!
dang dude!
i learned so many things in this tutorial!
now i know how to use ratio to make sizing simple❤ thanks ❤
Thank you Tim. You do a great work on tutorials. Shine on 🤩
you always make very easy to learn 🤗
Thank you Tim!
You are such a nice teacher, thank you very much!!!😊
Thank you!!
oh man your ideas are genius
Nice one, please do more tutorials on native webflow interactions❤.
I love that interaction, i'm currently using it in my old website that i'm currently changing because i currently hate it lol
it would help if you had therapy
Thank you for this tutorial Timothy! Why you using nav component instead of just div block? what a benefit of using nav component?
Glad this helps! The native nav has some built in accessibility benefits. Often I'll build a custom nav to get around some of the annoying style defaults of the native nav, and then recreate the accessibility features with code. But to keep this tutorial simple, I just used the native nav.
@@timothyricks thanks for reply man! Got it, i also use custom navs, only adding some aria labels for open and close menu buttons
If no initial state is set, why doesn't it just use the size you set on the canvas? but sometimes it does, right? I've ran into this before, where I had to use a static measurement, but wanted the animation to be based on the size define per breakpoint - thus had to create a second animation for mobile. I don't know how you keep track of all these nuances lol
Goooood
Something is set wrong for this to work on mobile. When you view it in webflow it displays correctly but when you publish and view on your phone it is 10x smaller. So small I thought it was missing until I looked at your example on my phone and saw the same shrinking.
Thoughts on why this is happening and a fix?
Thanks so much for the heads up! This is from a bug with the way Safari handles flexbox. Removing the flexbox stretch styles and applying a height: 100% instead solved it. I just updated the cloneable to a fixed version.