Hello! I’m having an issue with a site that I’m building using Astrid.
The site’s menu works very well in both desktop and mobile breakpoints on their respective types of devices, but a strange behavior starts showing up when I use the site in a window that triggers the change to the mobile menu layout.
Specifically: Hovering over a top-level menu item that includes second-level items with my cursor causes the menu to expand. Moving the mouse off of the top-level menu item and accompanying list of sub-items collapses the menu. Clicking on the top-level menu item in question causes the sub-menu items to collapse while still being moused-over. Chrome isn’t reporting a css hover state appearing on any of these items when I look at them in the inspector.
It seems like both behaviors should only happen when clicking on the caret next to the expandable menu item, in a similar fashion to how you would tap on that same item on a mobile device, instead of acting like the desktop menu and expanding on a hover state. Since hover events don’t occur on mobile devices (except in rare use-cases): This would be more ideal.
Long story short: I’m looking to effectively disable hover events on the mobile menu entirely, relying on clicks or taps on parented top-level menu items to open/close their sub-menus. Is there a way to disable the hover functionality that I’ve described on the mobile menu in Astrid?
Thanks in advance!