Webflow Navbar Color Change on Scroll - Step-by-Step Tutorial
HTML-код
- Опубликовано: 4 авг 2024
- In this @Webflow tutorial, I'll teach you how to make a navbar background change color upon scrolling.
This is especially useful when one of your pages for example your home hero section has a background video to which you want to draw maximum attention to. You will also notice we are using native Webflow interactions, so if other pages in your site don't require this effect, that would be possible even under the same NavBar Component.
📚 Time Stamps:
Intro / Problem: 0:00
Example Website: 0:08
Webflow Navbar Setup: 1:34
Applying Webflow Interaction: 4:36
Creating component & Resuing: 6:55
Closing Statement: 8:02
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Affiliate Links:
Hire a Freelancer on Fiverr: fiverr.grsm.io/k8bhq1js4hmx
Try Webflow: webflow.partnerlinks.io/4brsn...
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
--
Peace!
#Webflow#HTML#CSS#WebDesign#UXDesign#WebDevelopment#Navbar#JavaScript#WebflowTutorial#Webflowshowcase
Great video, Derek! Thank you!
My pleasure! - Thanks for watching.
Great video! Thank you.
You are welcome!
thanks bro!!!
No problem!!
How do you make it that the navbar is over the video if its in separate pages? Thanks!
For the navbar component if you change the position:
1/ Sticky (with 0px top) = It would sit at the top
2/ Fixed it would sit at the top but can be overlayed over sections such as the video.
Hope this helped?
@@dereksiuau Thank you but I would want the navbar to still be sticky to the whole body layer yet lay over the homepage when you first load the page. This is because the homepage has a gradient and it looks funny when the navbar is above the homepage, i want it to be overlayed and also sticky to the whole website. many thanks 🙏