Add Gradient to Transparent Navigation Bar (Version 7.1)

Site URL: https://silver-porcupine-gp5t.squarespace.com

Hello Squarespace Community,

I am building a site using version 7.1 and am very close to finishing it! One of my last orders of business is to add a gradient to the navigation bar. The catch is that I want the nav bar to be transparent at the top of the page and then the gradient to show up when you start scrolling on the page.

The gradient should fade from orange (#FF8700) on the left to bright yellow on the right (#F7FF00).

Any help is much appreciated!

Have you solved yet?

If not, can you setup password & share url? Your site is private.

No haven't solved it yet.

The URL is https://silver-porcupine-gp5t.squarespace.com

Password is dowdy1234

https://heathertovey.com/blog/gradient-backgrounds/  read the whole lesson, the comments have code for changing banners, and headers to be gradient. 

9 hours ago, brlawson said:

No haven't solved it yet.

The URL is https://silver-porcupine-gp5t.squarespace.com

Password is dowdy1234

Add to Home > Design > Custom CSS

.header-announcement-bar-wrapper.bright.shrink {
    background-image: linear-gradient(to right, #FF8700, #F7FF00);
}

@tuanphan I pasted the code in the Custom CSS field and it works great, but only on the homepage. How do I apply the effect site wide? Thanks!

1 minute ago, brlawson said:

@tuanphan I pasted the code in the Custom CSS field and it works great, but only on the homepage. How do I apply the effect site wide? Thanks!

try

.header-announcement-bar-wrapper.shrink {
    background-image: linear-gradient(to right, #FF8700, #F7FF00);
}

This is awesome. Is there a way to make the bottom part of the gradient transparent like this site? I can't work it out. Thanks!

https://theprincesstheatre.com.au/

Don't worry, got it! It's not as smooth as the example site but it works!

.header-announcement-bar-wrapper {
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
}