Menu hover in Horizon 3.3.0

Store Design
,
1

Hi all, I’ve encountered an issue after updating from Horizon 3.2.1 to Horizon 3.3.0.

Before i updated the web page, when the mouse interacts with the main menu, the menu would hover and give time for the user to click on the options, after updating the moment my mouse leaves the menu button the dropdown menu disappears. Thanks in advance!

image
image435×220 8.06 KB

2

Use this solution – Vessel 3.3.0 submenu problems - #11 by tim_1

Vessel is internally the same theme as Horizon.

3

Hi,

Hope this will help

The update likely introduced a small hover gap or stricter menu detection.

Fix by overlapping the dropdown with CSS

CSS example

.header__submenu {
  margin-top: -5px;
  padding-top: 5px;
}

Or adding a short JavaScript delay so the menu doesn’t close instantly.

let closeTimeout;
menu.addEventListener('mouseleave', () => {
  closeTimeout = setTimeout(() => closeMenu(), 200);
});
menu.addEventListener('mouseenter', () => {
  clearTimeout(closeTimeout);
});
4

same issue, driving me crazy, dev should fix this asap

5

The fix mentioned above was suggested on 5th of Feb, but devs also have a fix for it, so just update your theme to the latest.

As per release notes