Streaming live at 10am (PST)

Top Static Menu Effect


#1

Hey Everyone!

I am trying to achieve a very basic effect on the top navigation bar. Mine, is just a fixed section that shows at the top of the page.

By default, is transparent, and the idea is that as soon as you start to scroll down, the background turns solid white. Thats all. Ideally with a smooth transition.

https://webflow.com/website/testingwebflownow

Please let me know if anyone can help.

Thanks so much to all star


Nav Bar Effect when scrolling down
#2

Hi @eze81 - we have a similar sticky nav on our homepage. You can find out how to build it here:

Fade In Navbar (19:47) - http://making.webflow.com/


#3

hey @brryant thanks for the quick reply!

so i viewed the video, created the second top menu section with the solid white, and added the "no show" to the initial load.

All i need is to set the transition so when scrolling down, loads that one (the solid white)...

I tried 5 times already as is not working. Can you please help with the second step? I think is almost there...

Thanks so much!!!


#4

Hi @eze81, try adding a scroll interaction on the element with the class "menuwhite" that changes its opacity from 0% to 100%. smile


#5

I have all day trying to get this working and no luck. So frustrating because it must be something so stupid I cant find it.

I already saw the video tutorial, but there must be something I am missing.

https://webflow.com/website/testthenavbar2

By default, the nav bar loads transparent.
When scrolling down, and the blue section starts, the nav bar should come down, but the "white" version of it.

Can anyone please help me taking a look and the detailed steps to make it work???

Thanks so so so so much!


#6

@thewonglv I just tried what you mentioned, and no luck frowning

Can you see my last publish? and maybe tell me the steps you would do to fix it?

Thanks a lot!!!


#7

Can you please take a look @thewonglv whenever you have a minute? I edited some steps.. must be close, but still not working... Thanks so much!!!


#8