Streaming live at 10am (PST)

How do I make my NAV bar black?

Hey guys, I would like the background colour of my navbar to transition into black when I scroll, when I scroll I loose visibility of my navbar when I am on white backgrounds, is there any way that I can have a transparent navbar when it is on the hero section but as I scroll down it transitions into a black background? please see images to make sense of this, sorry if it’s confusing!

preview link - https://preview.webflow.com/preview/nc-styling?utm_medium=preview_link&utm_source=designer&utm_content=nc-styling&preview=786cc99e781e04f9fc27395ea2c9ed03&mode=preview


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

Yes. Create a div at the root of your navbar, make it position absolute and make sure the navbar itself is position relative or anything else (but not static). Then make the new div 100% width and height, make sure it sits on the bottom of the navbar (use z-index values) and give it a bg color, like the black you want your navbar to be. Lastly, make the new div opacity:0.

Select the first white section, create a Scroll into view interaction and make it act on the opacity of the div you’ve created.

1 Like

Thank you @vincent, speedy response

Oh, I was just passing by :wink:

Edit: dang!

1 Like