Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
brlawson

Add Gradient to Transparent Navigation Bar (Version 7.1)

Question

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!

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
Posted (edited)
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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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);
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...