Hey guys. I’m adding a simple menu that displays a submenu when passing over it. The issue is that, for some reason, it bugs when approaching the cursor from below to the center, but this issue is not present when doing so from any other direction to the center. I’m attaching a video so you all can visualize it better.
If it helps, it seems like that happens when passing over the text outline box, and after touching some aspects of the code, the issue persists. Would appreciate a fresh pair of eyes that can help us mitigate the issue. We’ve been suffering with the Horizon theme lately, and we are not that into the Shopify documentation workflow. TY in advance, everyone!
As a side note, the issue is not visible in Firefox for some reason, but in the rest of browsers.
We also have another issue: for some reason, we’ve moved the menu position from the right to the left position. Now, after some design modifications, we are unable to move it back.
Some of those modifications were a flex search bar setting, so it doesn’t bug when modifying the window size, but it seems like the search bar is blocking the position as well. If we force the alignment to Center or Right, it just bugs the search bar position.
We’ve already tried modifying the values from the Editor, and also from the code but nothing works, as it remains on the left side. We are also pretty confused here. Would you mind taking a look? TY. I’m also attaching the search bar code if it helps.
Looking at your code I dont think the search component itself is the problem. The issue is more likely with the header layout.
This line caught my eye
.mgr-custom-search-wrapper {
flex: 1 1 auto !important;
justify-content: center !important;
}
Because the search wrapper has flex: 1it grows to fill all available space. That means there’s no room for the menu to move to the right it will always be pushed to the left.
Inspect the parent container first
Open DevTools and inspect the element that contains all three items
You’d rather share a link to the actual page where the code is implemented.
My guess based on the video you’ve shared:
The behaviour you’re experiencing is not unusual – when you start hovering, the popup element overlays the trigger element which looses it’s hover state, which leads to the popup dismissal and trigger element regaining the hover state…
The usual fix is to make the popup a child of the trigger – this way trigger would not lose hover state over the popup.
Or adding animation delay.
But again – this is just a guess until I can see the implementation.
Sharing just the code often is not enough as some other factors, like theme own css may be at play too.
Looked at the site and I do not see the hover problem.
It rather looks like a native Horizon menu.
About structure:
The menu is inside the .header__column--left element.
You also have 2 .mgr-custom-search-wrapper elements – one is in the column–left and another in the column–right.
But the left one is permanently hidden with CSS.
Also, having two of those is not the best idea because it causes duplicate element ids.
But if you keep only the left search-wrapper, you can easily position it to the right of the menu, either by repositioning the element in HTML code or by using a rule like:
Also pay attention to the JS errors – there is an error message about missing “resetButton” – this, i guess, prevents theme JS from working properly and possible as a result i get this (after resizing browser window to narrow and back):
