Help: Remove background gradient on animation

Design help General
1

Hi I have a navbar with a gradient black to transparent background. When the page scrolls down that navbar is hidden and then when the user scrolls up I am showing it again. When I show it again I want it to be white. I can set that option in the animation panel, but I can’t find a way to remove the gradient.

Here is the link https://preview.webflow.com/preview/help-gradient?utm_source=help-gradient&preview=ec1fde52b5e504ee0e0d6aa9b81601d4

Is there any way I can do this, even with custom code?
Thanks a lot!

2

Hi @yakito

Can you please share your read-only link?

3

Hi @donaldsv, thanks! I will put up an example I can share as my client won’t be happy to see her page on the forum. Be right back with it.

4

Here is the link https://preview.webflow.com/preview/help-gradient?utm_source=help-gradient&preview=ec1fde52b5e504ee0e0d6aa9b81601d4

the idea is that when I scroll up, I want the nav bar to have the white background without the black gradient.

Any tips will be appreciated!
Thanks!

5

Alright so here’s a solution I’m thinking of:

https://cl.ly/7097bb

  • Remove the gradient from your Nav Bar 2
  • Create a new div and wrap all of your nav content inside it
    (you’ll need to make its width 100% and padding 24px and remove the padding from the Nav Bar 2
  • Apply the gradient on the new div

In your interactions, you’ll be able to control the opacity of the new div, so you can make it 0% when you want the Nav Bar 2 background to be white. Hope that makes sense!

1 Like
6

that’s smart! I will try it! thanks!

1 Like
7

ouch! I found a problem with that. When I set the opacity to 0% then everything disappears as it is inside the div.
The only idea I can come up is having 2 nav bars and hiding one and then unhiding the other.

Seems like too much, but I can’t think of any other way

8

You’re totally right! Here’s another way to do it:

https://cl.ly/8b6171

  • Remove the gradient from Nav bar 2
  • Create a gradient div inside container 2
  • Make the gradient div width and height 100% with position absolute and full
  • Set your gradient on this new div
  • Give the Nav menu a z-index of 1

Then you can play with the opacity of the gradient div with no problem.

https://cl.ly/1efa6a

1 Like
9

yes! that is it! thanks!

1 Like