changing color of header bg and header nav on scroll

Site URL: https://stephanievo.squarespace.com/

PW: Ml0815!

hi! i'm having some trouble getting my header to change color on scroll. my header bg is #758467 and the nav text is #dfe6da and i want it to invert those colors on scroll. i also have the following CSS already inputted to make hover buttons on my nav bar

.header-nav-item a {
  padding: 5px 12px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}

.header-nav-item a:hover {
  background: #819171;
  padding: 3px 10px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}

is there something with it that's interfering with allowing me to change color on scroll? thanks in advance!

You can use this to Website Tools > Custom CSS

header#header.shrink .header-background-solid {
    background-color: #dfe6da !important;
}
header#header.shrink * {
    color: #000 !important;
}
header#header.shrink img {
    filter: invert(1);
}

On 10/16/2024 at 10:54 PM, tuanphan said:

You can use this to Website Tools > Custom CSS

header#header.shrink .header-background-solid {
    background-color: #dfe6da !important;
}
header#header.shrink * {
    color: #000 !important;
}
header#header.shrink img {
    filter: invert(1);
}

 

it looks like i'm still having trouble changing the color of the header itself:( when i scroll down, i'm able to change the nav bar text color but my logo turns black and the header itself isn't inverting to #dfe6da like i want it to

On 10/19/2024 at 10:36 PM, stephanievo said:

it looks like i'm still having trouble changing the color of the header itself:( when i scroll down, i'm able to change the nav bar text color but my logo turns black and the header itself isn't inverting to #dfe6da like i want it to

You mean on scroll over each section >> it will change color, different color with different section?

Or on scroll only, any section >> it will change color (same color)