Why does my Horizon mega menu close before I can hover into it?
A gap between the nav link and the dropdown panel makes the Horizon theme's mega menu snap shut mid-hover. Here is what is likely causing it and how to fix it without breaking keyboard access.
What's going on
On Shopify's Horizon theme, moving your cursor from a top-level nav item down into its mega menu panel can cause the panel to snap shut before you get there. There is often a small visual gap between the bottom of the header link and the top of the dropdown panel, and if your mouse crosses that gap, the menu registers the pointer as having left and closes. The result is a mega menu that opens fine on hover but is practically impossible to actually reach.
This is a common complaint with mega menus generally, not just Horizon, and it tends to survive quick fixes. Changes like raising the z-index of the panel or adding a short delay before it closes often do not solve it, because they change what is visible rather than the actual area your cursor needs to stay inside for the menu to count as still open.
The practical fix usually combines removing whatever spacing creates the gap in the first place with extending the hoverable area so the pointer path from link to panel never actually leaves it. Because this depends on the theme's own markup and styling, and themes get updated periodically, a fix that works today can need to be reapplied or adjusted after a future update, which is consistent with merchants reporting they have tried several quick fixes without a lasting result.
Why it happens
Mega menus like the one in Horizon generally track whether the pointer is still within the trigger link or the panel, rather than relying purely on a simple CSS hover state. When there is spacing between the clickable nav link and the dropdown panel, moving the mouse diagonally or slowly through that gap can register as the pointer leaving the tracked area before it ever reaches the panel, so the menu closes.
Because the exact spacing and behavior live inside the theme's own code, and themes receive periodic updates from Shopify, a fix that works today can be affected by a later theme update, which lines up with reports of merchants needing to reapply a fix more than once.
5 ways to fix it
Check the theme editor's spacing settings first (free, no code)
Before writing any CSS, open Online Store, then Themes, then Customize, and look at the header and mega menu sections for spacing or padding controls. Extra padding between the nav link and the dropdown panel is often what creates the gap your cursor has to cross. Also confirm you are running the latest version of the theme, since Shopify periodically ships updates to header and navigation components that can change this behavior, and updating alone sometimes resolves it.
Close the hover gap with custom CSS
If the editor's built-in settings do not fully close the gap, you can add custom CSS from the theme's code editor to remove the stray spacing between the nav link and the menu panel, and to extend the hoverable area so the pointer never has to cross empty space to reach the dropdown. This is the most common working fix reported for this issue. Test the change on a duplicate or unpublished version of your theme first, since the exact markup and class names can differ between theme versions and may need updating again after a future theme update.
Understand why simple fixes like z-index or delay tweaks often fail
Many mega menus, including newer Shopify themes, track whether the mouse is still over the trigger or the panel, and close the menu once the pointer leaves that tracked area, independent of what is visually on top. That is why changes like raising the z-index or adding a delay before the menu closes often do not fix the problem: they change what you see, not the actual area the pointer needs to stay inside. A durable fix has to address the gap in that hoverable area itself, whether through spacing changes or a small invisible element that bridges it.
Keep keyboard and screen reader navigation working while you patch this
Well-built mega menus support opening the panel with focus as well as hover, so merchants and shoppers using a keyboard can reach the same links. If your fix only targets mouse hover in CSS, keyboard users tabbing through the header can lose access to the same submenu. After making any change, test navigating the header with Tab and Shift+Tab, not just with a mouse, to make sure the fix does not create a new accessibility gap.
If the problem keeps coming back after theme updates, consider a longer-term fix
Because this kind of fix usually lives in markup that the theme vendor can revise, a hand-patched CSS fix can break again the next time the theme updates, which matches merchants reporting they have to reapply a fix repeatedly. If your mega menu is central to how customers browse your store and you do not want to keep monitoring theme changes, it may be worth having a developer rebuild the navigation block in a way that is less coupled to the default theme markup, or using a dedicated navigation app instead of continually patching around updates.
Bottom line
Start with the theme editor's spacing controls and make sure you are on the latest theme version, since that resolves the gap for some stores on its own. If it does not, a targeted CSS fix that removes the padding creating the gap and bridges the hoverable area is the standard solution, and it is worth testing with keyboard navigation, not just a mouse, before you call it done. If you find yourself re-applying this fix every time the theme updates, that is a sign the underlying markup is the real problem, and a more durable rebuild or a dedicated navigation app may serve you better than continued manual patching.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.