Nav bar Intereactions Question: desktop and mobile differences

Design help General
1

I have a temporary hero image for December that required me to change the BG color of the nav bar from transparent to black as page scrolls with the text staying white. I have an interaction set up that does just this. However, I do not have this interaction applied to the mobile version because it affects all the dropdown menu text and changes them to white as well on white BG so they cant be seen.

All I want for the Mobile menu is for BG to become black upon scroll, with dropdown menu BG staying white with black text. It currently has a transparent BG. Right now, the Home option on dropdown is white (and black on hover) and I need it to stay black. after visiting different pages the Events option also turns white. It seems my interaction is affecting the mobile dropdown. :woman_shrugging:

Do I need to add a class to mobile links to differentiate them in interaction?
Most of my traffic is mobile so I need to fix asap.

Please let me know if you can help me. Thank you.
I’m attaching screenshots of the mobile menu behavior.

Here is my live site: https://www.valleyviewfarms.com/
(how to share your site Read-Only link)

VVFMENU
VVFMENU2995×1927 474 KB

2

Interactions can be set so that they only run on specific breakpoints, you’ll see that option at the bottom of the integrations panel.

You can create two different interactions if you want, one just for desktop, another just for mobile.

3

Thank you. I know that and I’ve tried setting a separate interaction for Mobile, but it’s still not working for me. Also can’t understand why the mobile menu is affected as shown in screenshot even though the interaction is not checked for mobile