I’ve watched tutorials and read a couple of forum answers for this topic and I still haven’t been able to do this for my website. I’ve already tried creating a new div layer on top with a color. Nothing has worked.
I want the background of the navbar to be transparent when the website loads, then turns into a fixed light brown nav bar when i scroll down. If anyone can show me how to do this step by step I would be so grateful!
You shouldn’t choose a load trigger, that will load the interaction on page load. You want to use a scroll trigger instead and choose when you want it to change.
I took a look. Opacity doesn’t work the way you are thinking. If you controlled the navbar with opacity, the links will disappear too. What you want to happen is the background color to change it’s opacity. The only way to get this effect is to create a duplicate of the navbar and make it look the way you want it to once it scrolls. Then make it display: none. Then make a scroll interaction on it to show once the page starts scrolling. You can also tell it to disappear when you get to the top of the page. Not sure exactly how to do that last part but I’m hoping someone else can chime in, or you can search the forums for it.
I actually did it with two different navbars because the client didn’t want their logo to displayed in the nav initially, but did want the logo to display when scrolling down the page.
Not sure if that’s the best way to accomplish this or not…still new to Webflow!
