Streaming live at 10am (PST)

Help: Remove background gradient on animation


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

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


Hi @yakito

Can you please share your read-only link?


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.


Here is the link

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!


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


  • 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!


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


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


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


  • 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.



yes! that is it! thanks!