Custom header on the homepage with color changing background and font at the scroll

Hello All 🙂 

Short story: On my homepage, I have a "dark" video, so I decided to change my logo and menu elements to white with transparent background when I scroll the background turn white, and the logo and all elements in the navigation header are black.

The issue: The code I add only work I open the custom CSS page, when I save and navigate only my logo remain before the scroll all the other elements are black.  Can you please help me fix that issue?  🫶

The demonstration below when CSS opens: 

Demonstration on the nav

The code currently used on CSS customisation : 

/* 1 - logo color */
.homepage .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%); 
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
.homepage #header.shrink .header-title-logo img {
    -webkit-filter: invert(0%);
    filter: invert(0%); 
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

/*2 -  menu list color */
/*on scroll change*/
.homepage #header.shrink .header-nav-item {
    color: black !important;
}

.homepage .header-nav-item {
    color: #ffff !important;
}
/* 3 - socials icons color */
.homepage .header-actions-action--social {
color : #ffff !important; 
}
/*on scroll change*/
.homepage #header.shrink .header-actions-action--social {
    color: black !important;
}

/*4 -  language selection color */
.homepage .current-language {
color : #ffff !important; 
}
/*on scroll change*/
.homepage #header.shrink .current-language {
    color: black !important;
}

/* 5 - cart color */
.homepage .Cart-inner {
color : #ffff !important; 
}
/*on scroll change*/
.homepage #header.shrink .Cart-inner {
    color: black !important;
}

/* 6 - Onscroll header color */
.homepage #header.shrink {
    background-color: white !important;
}

/*Mobile version*/
.homepage .header-burger-btn burger {
    background-color: white !important;
}

Hi,

What is site url?

On 7/3/2023 at 9:31 AM, tuanphan said:

Hi,

What is site url?

Here's the URL : https://www.maisonkebe.com/
Code : TEST2023

Thank you

@tuanphan