Change Header colour on scroll / change header text on scroll

yourdjandmore · January 15

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 January 15 by yourdjandmore

tuanphan · January 16

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

yourdjandmore · January 16

Thank you so much! Worked exactly how I wanted.

Change Header colour on scroll / change header text on scroll

Recommended Posts

yourdjandmore

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

yourdjandmore

Link to comment

Create an account or sign in to comment

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources