wonderwebber

I asked this question as part of another query that I submitted and I received the following response that I wanted to share on this thread:
After using the dev tool in this site https://lightsandtracks.squarespace.com/, i think this is the configuration to set hover effect.
 
.header-menu-nav-item a:hover { color: #ff524a !important; } a:hover { color: #ff524a !important; opacity: 1 !important; text-decoration: none !important; } .header-menu-nav-item a:hover::after { content: '→' !important; font-size: 3.2rem; color: #ff524a; font-family: 'FunktionalGrotesk-Book'; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; opacity: 1 !important; }

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.