Nav bar has a fade from transparent to white when scrolling up

Design help General
1

Hi,

I am working on a simple landing page and I am trying to get the nav bar to simply go from transparent to white without having this fade and pop from transparent to white. My goal is to just have a white nav bar appear when you scroll up.

You can see what I mean here when you scroll up (note it is not mobile friendly yet):

https://preview.webflow.com/preview/test-1bf39e?utm_source=test-1bf39e&preview=c3afbc428d4729cee1e34a88ab27ac8c

https://test-1bf39e.webflow.io/

Thank you in advance for your help and advice,
Philipp

Here is my site Read-Only: https://preview.webflow.com/preview/test-1bf39e?utm_source=test-1bf39e&preview=c3afbc428d4729cee1e34a88ab27ac8c

2

@philippf - I moved this topic as these are not bugs. Also please edit your post to focus on one question not two unrelated ones. Create another post in the correct category if you need to. Thanks.

3

Thanks @webdev for the feedback. I have modified it.

4

You have two navbars. Why?

5

I don’t see two nav bars in the navigator…

6

I am not on my normal machine, must have been a browser issue.

Anyway set your Navbar BG color to rgba(255, 255, 255, 0). I would add a initial state for BG color as well to your interaction. Set to same color.

7

Thanks. If I set the intial state to that same color it stays transparent, even on scroll up. I put the intital state as white and now it seems to look better. It fades from transparent to white on scroll up, but it doesn’t make a strange transitional pop.

8

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