Mobile menu on desktop shows strange behaviors on hover

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!


You described behavior that should only happen when you manually resize viewport, normally site users don’t see that.

You can try to do the following. Open your website in desktop browser, switch to mobile view using browser tools or simply reduce browser window width and verify that the issue you described above is present. Then reload the page and try to hover over mobile parent menu items again.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.