Nav Bar Animated Like Template

Design help General
1

I think this will help many out there!

I followed all tutorial videos, and they are incomplete and outdated.

All I want are the DETAILED steps, like the other tutorial videos, that show from ZERO to COMPLETION, how to achieve a nav bar effect like these ones:

http://oliver1.webflow.com/
http://oneframe.webflow.com/
http://approach.webflow.com/

I really hope that someone can help here.

Thank You so much! and for the webflow team, please consider a new tutorial video. I spent hours getting frustrated over this, and I am sure I’m not the only one out there trying to recreate this cool effect.

Thanks Again :smiley:

2

Hi,
maybe this helps: http://making.webflow.com
play Video @ 19:47 (Fade in Navbar)
Cheers!

3

thanks @Jozef_Benz! yes that did help a lot!!! the other videos were not showing all the steps as this one. thats great!

any idea why is not working on the iphone?

https://webflow.com/website/testthenavbar2

Its working when I see the mobile preview in webflow, but when I actually grab my iphone to test the website, the menu is not loading? any idea why???

http://testthenavbar.webflow.com/

Thanks so much!!!

4

Oh - no idea. I am an absolutely beginner. However - it is nice effect, but only on desktop. I would try to turn it off n the small mobile versions. Means the initial navbar is hidden below mobile landscape and mobile portrait breakpoints and the sliding-in navbar is always fixed on the top (no effects on mobile sizes) … just an idea …
cheers! Be strong!
Jozef

5

Hi @Jozef_Benz, your published link no longer works. The scroll trigger that is used in the interaction in that menu, is disabled on iOS devices. Did that answer your question? Cheers, Dave