Problem with menu hover in header - desktop

Store Design
, ,
1

On my desktop store version, when I hover over my menu item and as soon as I move my mouse to one of the dropdown submenus it disappears straight away, making it impossible to select a sub menu on desktop. I did recently add some code to move the position of the menus a bit further right on desktop, so this may be why, but I’m not sure. www.marencio.com horizon theme

Screenshot 2026-06-30 at 21.11.16
Screenshot 2026-06-30 at 21.11.161920×566 82 KB

2

Hi,

I think the issue is being caused by a small hover gap in the desktop dropdown menu.

I recently added custom CSS to move the desktop dropdown slightly to the right. Because of that adjustment, the dropdown may no longer be directly connected to the main menu item.

Now, when I move my mouse from the main menu item to the submenu, the cursor briefly leaves the hover area. The Horizon theme then detects that hover has ended and closes the dropdown immediately.

So the likely cause is:

The custom CSS moved the dropdown position and created a gap between the main menu item and the submenu hover area.

I tried the CSS below to fix it, but I need help confirming the correct Horizon theme selector and whether this is the best approach:

@media screen and (min-width: 990px) { .header-menu .menu-list__submenu { width: max-content !important; min-width: 220px !important; left: auto !important; right: auto !important; margin-left: 0 !important; transform: translateX(30px) !important; } .header-menu .menu-list__submenu a, .header-menu .menu-list__submenu span { white-space: nowrap !important; } .header-menu .menu-list__list-item { position: relative !important; } .header-menu .menu-list__list-item::after { content: ""; position: absolute !important; left: 0 !important; right: -80px !important; top: 100% !important; height: 30px !important; display: block !important; } }

Could you please check the correct selector for the Horizon theme and advise how to prevent the dropdown from closing when moving the mouse into the submenu?

3

Try updating your theme to the latest version.

Yours is 3.4.0, while 3.5.0 release notes has:

[Header] Fixed dropdown navigation menus closing unexpectedly when moving the mouse toward a submenu.

6

Hello Tim, thanks for your message. When I try to update my theme, this error message comes up:

Screenshot 2026-07-02 at 17.07.19
Screenshot 2026-07-02 at 17.07.191890×1181 229 KB

do you know how to resolve this issue? Thanks

7

Since the issue started after moving the menu further right, I’d check your custom CSS first. This usually happens when there’s a gap, margin, or z-index issue between the parent menu item and the dropdown, causing the hover state to break as soon as the cursor moves to the submenu. Try temporarily disabling your recent menu-positioning CSS and see if the dropdown works again.

8

Unfortunately, since version 4.0.0 Horizon no longer uses color schemes, they’re now using color palette, not the best move…

Some of your settings are no longer compatible :frowning:

Reach out to support – after all Horizon is Shopify’s own theme…

9

Ok will do, thanks for the help :grin:

10

I may have a solution for your current theme:

  1. Since this solution requires theme code edit
    make a theme copy ... → Duplicate.

  2. Either keep copied theme as a backup and edit the live theme, or perform edits in the copy and publish it later, when happy with the result;

  3. Open theme code editor via ...->“Edit code”;

  4. Find assets/header-menu.js in the left pane and open this file;

  5. Find the following code:

 #deactivate = (item = this.#state.activeItem) => {
    if (!item || item != this.#state.activeItem) return;

    // Don't deactivate if the overflow menu or overflow list is still being hovered
    if (this.overflowListHovered || this.overflowMenu?.matches(':hover')) return;
  1. Add the following code right after the last line of the code above:
    if (item.closest('.menu-list__list-item')?.matches(':hover')) return;
  1. Save and preview modified theme.
    The problem should be fixed.
11

Hi @ecom11,

Go to online store > edit theme
Then go theme setting (the gear icon on the left)
Click on custom css and paste this:

header-menu details:hover > .header__submenu,
header-menu details[open] > .header__submenu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 9999 !important;
}

.header__submenu {
padding-top: 20px !important;
margin-top: 0px !important;
position: absolute !important;
top: 100% !important;
}
#header-group {
position: relative !important;
}

Save.

12

Are you testing your solutions before posting?

Half of the selectors in this code do not exist in the theme and the code does nothing to solve the original problem.