Nav bar transparent over header image?

Hello all,

New Webflow user and first time poster here.

I have a site - Webflow - PA 1

I’d like to replicate the nav bar animation as is seen on this site - https://onandon-template.webflow.io/

So transparent over the header image and as one scrolls down the page the nav becomes a solid colour.

I’ve searched a lot of the resources (all related seem to be years out of date) and been few quite a few tutorials but I find myself stuck!

Any help or sign-posting to help would be much appreciated.

Warm wishes,
Peter


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You have your Nav set at Sticky. It needs to be fixed. Then just add a scroll animation to the nav where the bg starts off as transparent and then at like 2% it goes to white. Do the same with with the text color.

1 Like

By same with text, I mean have the text start off at white and at 2% it goes to black.

1 Like

You sir, are amazing! Thank you, I got it to work fairly quickly.