Jump to content

Gradient in Navigation - working on some pages, not others?

Recommended Posts

Site URL: https://moose-semicircle-6ext.squarespace.com/


I'm looking to achieve a gradient fade behind my navigation as I have a full width carousel. 

So I've used this code (found on another post here):

.Header {background: rgb(245,245,245);background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);}

header { position: fixed !important; width: 100%; z-index: 99999; }

@media only screen and (min-width:640px) { main { padding-top: 80px; } }

.Footer {background: rgb(253,177,57);background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);}


It works on the Services (2) page but on the home page and Services (1) - where there is a gallery behind the nav and where I need it to work - it isnt working, the gradient turns into a solid?. Any idea why it works as gradient one page, and solid the other? Thank you in advance! 


password: hello123

Thank you!

Edited by heytom88
updated tags
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

 New code

header.Header {
    background: #f5f5f5;
    background: linear-gradient(180deg,#f5f5f5 0%,#f5f5f5 0%,rgba(245,245,245,0) 100%) !important;


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.