Jump to content

Change Header & Navigation Links colour on Scroll

Recommended Posts

Site URL: https://owl-bluebird-et6t.squarespace.com/

So my site header has a transparent background with white navigation links

I want it to do 3 (related) things

  1. Change the background to white and the nav links to black on hover 
  2. Completely disappear except of the navigation links & background on scroll (which I kind of achieved by reducing the logo height on scroll but it doesn't look quite right)
  3. Become white with black links on on scroll as well

Here's a website that does this so you get the idea


thanks in advanced



Edited by stefanosg
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

#1. Use this CSS

header#header:hover {
    background-color: white !important;
header#header:hover img {
    filter: invert(1);
header#header:hover .header-nav-item a {
    color: black !important;

#2. #3. You solved it?

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.