Custom Dropdown Interaction Inside Nav Bar on Mobile Clash

I am using the default Nav Bar to formulate the navigation for my site. I am using the Default dropdown element inside the nav bar to open up more extensive menus with quite a few links.

When on mobile, I wanted to hide the links underneath the categories within a dropdown to save space. To do this I created a custom interaction that opens the sub-menu.

This all seems to work when I have the Mobile menu in the “open” state prior to testing the preview. But as soon as you have the Mobile Menu in the closed state or go to the published site, the custom interaction within the dropdowns clashes with the Mobile Menu causing the menu to close completely.

When you reopen the Mobile Menu, you will see that the Sub Dropdown you were trying to interact with is indeed open. This lets me know the interaction itself is working, but when you click on the element, it triggers the menu to close at the same time.

Does anyone know how I can get around this?


Here is my public share link: Webflow - Purely CRM