How to Create Translucent Nav. Bar then Scroll to Solidify?

Site URL: https://wandpdesign.com/

Hi! 

I've been trying different methods to no avail on how to get a translucent nav bar that blends into the background when you open my site, and when you scroll down it turns into a smaller white bar up top. Attached link for example. 

I'm using the Clay template in the Brine Family. 

Thank you in advance!

I see you fixed? https://wandpdesign.com/

If above link isnot your site

You need use JS/jquery + CSS to do this.

If you share link to your site, I can take a look. Each template has different class so need different code.

The idea here is that when scrolling down, JS will add a class to the nav, and you can use CSS for that class. When scrolling up, JS will remove that class so that nav can return to normal.

(If it's fast, I'll send the code. However if it takes longer than I thought, I will not answer free for this.)