When hover on the menu then select a link, the hover menu disappear when moving the mouse

Store Design
,

Topic summary

A Shopify store owner encountered an issue where dropdown menus (Shop and Support) disappear when moving the mouse to select a link. The site in question is astroheik.com (Password: 1).

Initial Solution:

  • Add CSS to wonify.scss.liquid file:
    • Set position: relative and z-index: 30 on .site-header > .page-width
  • This fixed the desktop hover behavior

Follow-up Issue:

  • The fix worked on desktop but caused overlap problems on mobile devices

Mobile Fix:

  • Add z-index: 69 to .drawer element in the same CSS file

The problem stemmed from CSS z-index layering conflicts. Both solutions involve adjusting the stacking order of page elements to ensure dropdown menus remain accessible and properly positioned across devices.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello fellow shopifyiers,

I am new to shopify and I am trying to fix a problem for couple of days now and hope you guys and direct me to a solution.

The problem is when you hover on the menu either Shop or Support, when trying to select a link, the menu will disappear. I have no idea what it’s causing the problem. I tried some solution from shopify such as adding top:30px to the .site-nav__dropdown or adding the display: block; to the .site-nav–has-dropdown:hover .site-nav__dropdown,.site-nav–has-dropdown:focus .site-nav__dropdown. Still with no success.

I hope you can try to help me and fix the problem.

Here is my website: https://astrohike.com

Password: 1

Sincerely,

2

Hi @Kyaroruk
You can try follow this path:
Themes => edit code => asset => wonify.scss.liquid
and add this code to bottom of the file wonify.scss.liquid

.site-header > .page-width{
position: relative;
z-index: 30;
}
1 Like
3

Thank you so much, it’s working :slightly_smiling_face:

Really appreciate.

Sincerely,

4

After triple checking, it’s working perfect on desktop but on mobile it overlap :disappointed_face:

5

Hi @Kyaroruk
add this code into the bottom

.drawer{
z-index: 69;
}
1 Like