Nested dropdown menu not working on mobile


On my website, I cannot get the navbar menu and submenu dropdowns to function correctly. The menu button with hamburger icon will open the first tier of the dropdown menu appropriately and close it if clicked again. Interestingly, this happens without having any set interactions, which makes me think that this action is built into the menu button code.

The issue is that when I then click on a dropdown menu item to reveal a submenu, it briefly opens then the entire dropdown closes. I understand the concept of setting a trigger interaction on a class and then children of that class are considered part of that element’s area (i.e. so if the children elements are clicked they are not considered outside of the area and close the dropdown). And I think that is for some reason what is going on. I click the menu button, it opens the dropdown, then clicking a dropdown item to open its submenu is considered outside of the element and causes the entire menu to close). If this is the case, clicking a dropdown item must be causing the hamburger Menu button trigger to close the tier dropdown entirely (I assume).

I have tried to add many different interactions to try to override this from happening. Adding an interaction does affect something because I can alter the dropdown menu transition to be more smooth or delayed. But I just can’t get the dropdown menu or children dropdown menus to stay open.

Any thoughts or advice would be greatly appreciated!!

Here is my site Read-Only: