Nav bar to be transparent at first, then solid color after scroll

Hi all,

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.

My website can be accessed here:

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 need to play with “interactions” menu. This is how you do it:

  • set your navbar bg opacity 0%


  • add new interaction
  • trigger: on load
  • step: opacity 100%
  • set timing, easing

Off you go :smile:

btw - pretty good website, you freelance on bali I guess? :smile:
Good luck

1 Like

Hi Mati,

Thank you for responding so quickly!

I tried your method but it didn’t work :frowning:

I recorded a video of my screen doing exactly what you wrote. Take a look and see what I did wrong?

Cheers, Clarinta

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.

Hi DFink

I changed to trigger for the navbar to scroll, but it still doesn’t work.

What am I doing wrong? What would you do? Could you try to change it on the public link that I shared to see what would actually work?

Thanks so much for taking time to help me out btw.

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.

1 Like

Thanks everyone who replied with their tips! I really appreciate it :smile:

I finally made it work after a support member from Webflow sent me a video with a step-by-step procedure on what I should do.

In case anyone else wants to know how to do this, let me know and I’ll post up the support video :smile:

1 Like

@Clarinta Yes, it would greatly help to see it!

Yes, post that video! :smile:
I made this happen on this project:

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!

Here’s the step-by-step video provided by Webflow support. Hope it helps!:


Very cool. Thanks for sharing! I never would have thought to do it that way. :smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.