Webflow Navbar Color Change on Scroll - Step-by-Step Tutorial

[@Aliencancode]

Great video, Derek! Thank you! u saved my ass, I'm an intern and the manager asked me to add this effect

[@dereksiuau]

Hahahaha - Thanks for being transparent, glad I could save your ass! Keep up the work as an intern it does not last forever, keep learning keep growing :)

[@michaeliroegbu3389]

Great video, Derek! Thank you!

[@dereksiuau]

My pleasure! - Thanks for watching.

[@jerembradshaw5982]

Great video! Thank you.

[@dereksiuau]

You are welcome!

[@sk_ts]

Thanks bro a lot, u saved me!!

[@dereksiuau]

Glad I could help

[@luizdeveloper]

thanks bro!!!

[@dereksiuau]

No problem!!

[@Random-yd7oh]

How do you make it that the navbar is over the video if its in separate pages? Thanks!

[@dereksiuau]

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?

[@Random-yd7oh]

@@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 🙏

[@alextodd8536]

how does this work if you add a white background on a hero image so the logo and nav links change colour? your two examples show it where they stay the same

[@dereksiuau]

Many ways, but same premise make sure the nav links have a set class then use the text color change, as for the logo you can either: 1/ Use the filter functionality 2/ Upload two logos positioned the same (through absolute position) then change opacity or hide / show. But again many ways of doing things.