Jump to content

Change Header colour on scroll / change header text on scroll

Go to solution Solved by tuanphan,

Recommended Posts

Hey,

My header starts off transparent with a white logo, icon, buttons and text. On the scroll it changes to a colour but I would like it to change to a white background with a black logo and black text, buttons and icons on the scroll. Also with a black drop shadow but only after the scroll.

I've figured out how to change the logo from white to black using this code:

Quote

//Replace Your Logo
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
 .header-title-logo a {
   max-height: 120px;
    content: url('https://static1.squarespace.com/static/60353742bb7c993fc5af5d38/t/65a50335eb2616311672b3e5/1705313078528/Your+DJ+%26+More-logo-black.png');
  }
}

Site is https://bell-manatee-76s2.squarespace.com/

Anyone who could help would be great,

Thank you

 

Edited by yourdjandmore
Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

You can use this CSS code

header#header.shrink {
    background-color: white !important;
}

header#header.shrink img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

header#header.shrink div.header-nav-item>a {
    color: black;
}

header#header.shrink a.btn {
    background-color: black;
    color: white;
}

header#header.shrink .burger-inner>div {
    background-color: black !important;
}

image.thumb.png.ee745971648a20d0ef6ee6f22d320bb8.png

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

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.