Nav bar transparent over header image?

Design help General
1

Hello all,

New Webflow user and first time poster here.

I have a site - https://preview.webflow.com/preview/aesthetic-f85f73-b6a57009e6c4187331eae9?utm_medium=preview_link&utm_source=designer&utm_content=aesthetic-f85f73-b6a57009e6c4187331eae9&preview=547c10a1288f79d5c2cb42d70ec575a1&workflow=preview

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)

2

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
3

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

1 Like
4

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