Jump to content

Add Gradient to Transparent Navigation Bar (Version 7.1)

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

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);
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.