Tablet/Mobile Menu Problem


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:

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