Header navigation dropdown closes when moving cursor from menu item to submenu

Theme Store
1

Bug Description

We’ve identified a usability issue in the header navigation dropdown menu.

Steps to reproduce

  1. Open the storefront using the Horizon theme.

  2. Hover over a navigation item in the header that contains child menu items.

  3. Move the mouse cursor from the parent menu item toward the opened dropdown submenu.

Expected behavior

The dropdown should remain open while moving the cursor from the parent menu item into the submenu, allowing users to access submenu entries without interruption.

Actual behavior

There is a small gap between the parent menu item and the dropdown menu. This gap appears to be caused by padding/margin in the navigation layout.

When the cursor passes through this gap, the hover state of the parent menu item is lost, causing the dropdown to close before the user can reach the submenu.

Impact

This makes navigation difficult, especially when users move the mouse quickly. In many cases, the dropdown closes repeatedly, forcing users to hover over the parent menu item again.

Suggested fix

Ensure that the dropdown menu is directly connected to the parent navigation item without any hover gap, or extend the hover area so that moving the cursor from the parent item to the submenu does not trigger the menu to close.

Additional notes

The issue is reproducible consistently and appears to be caused by spacing between the trigger element and the dropdown container.

2

What theme version you’re using?

Merchant forums had several topics on this with fixes suggested.

There is a topic here as well – Horizon/Vessel 3.3.0 submenu problems
This was fixed in later versions.