Seeking CSS to update color of hamburger menu icon on scrolling down the page

12 hours ago, wonderwebber said:

Site URL: https://sswebdev-one.squarespace.com/

The password for our site at: https://sswebdev-one.squarespace.com/ is: secret

On the "Initiatives" (https://sswebdev-one.squarespace.com/initiatives) and "Contact" (https://sswebdev-one.squarespace.com/contact-us) pages of our website the hamburger menu icon is red when we're at the top of the page.  (in a narrow browser or on a phone)

I would like to update the color of the hamburger menu to white when you scroll down the page.  I have defined the following CSS but it doesn't seem to be working as the hamburger menu remains red on scrolling:

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .burger-inner > div {
        background-color: white!important;
    }
}

If you have any suggestions on how I can achieve the change in color of the hamburger menu icon on scroll I'd appreciate your feedback. 

 

did you try this

.tweak-fixed-header .header .burger-inner>div,
.header--menu-open.tweak-fixed-header header.header .burger-inner>div {
  background-color: red !important;
}
.tweak-fixed-header .shrink.header .burger-inner>div {
    background-color: #fff !important;
}