Tablet/Mobile Menu Problem

Hello,

I created a “while scrolling” effect to my tablet/mobile menu. At the start, the navbar background is transparent, hamburger menu is white and company logo is white. After scrolling 5%, the navbar background turns white, hamburger menu turns navy blue and logo turns black/navy blue.

All works fine until the hamburger menu is opened somewhere below that change/trigger point. For example, If a user scrolls down 5% and then opens the tablet/mobile menu the above “while scrolling” interactions take place - the problem is the open menu background is navy blue so you lose sight of the navy blue hamburger menu and the black/navy blue logo.

Ideally I’d like all the “while scrolling” interactions to work just as they are but somehow regardless of where a user opens the menu the white logo appears and the hamburger is white. I imagine this can be accomplished with javascript but I have no idea how and I can’t figure out a way to make this happen in webflow. Any help would be greatly appreciated! Here is my preview link:

https://preview.webflow.com/preview/commonscapitaladvisors?utm_medium=preview_link&utm_source=dashboard&utm_content=commonscapitaladvisors&preview=affaadd484cd345831599c21c66d6577&mode=preview


Here is my public share link: LINK
(how to access public share link)