Shopify header dropdown only works from certain hover directions

Technical Q&A
, , ,
1

Hello,

I’m currently building my first Shopify website and I’ve run into an issue with the header menu. I contacted Shopify Support via live chat, and they recommended posting here, so I’d really appreciate any help.

The issue:

When I hover over the header menu items, a dropdown menu should appear containing the subcategories. However, the dropdown only appears if I move the mouse onto the menu item from the top or the sides.

If I move the mouse up from below and hover over the same menu item, the dropdown doesn’t appear at all.

I’ve recorded the issue here so you can see exactly what’s happening:

Shopify support suggested that a possible solution could involve extending the hover hitbox with a transparent overlay element for the dropdown. That’s unfortunately well beyond my abilities, so I’m hoping someone here might be able to point me in the right direction.

Thanks for taking the time to read this, and I’d really appreciate any advice or suggestions.

2

I should have added, you can see for yourself here:

3

Hey @stevensonsartstore

You can either add this CSS in the Custom CSS option of the Header in theme customization

li.menu-list__list-item, a.menu-list__link {
    height: auto !important;
}
overflow-list.overflow-menu.background-matches-parent {
    align-content: center !important;
}

OR

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
li.menu-list__list-item, a.menu-list__link {
    height: auto !important;
}
overflow-list.overflow-menu.background-matches-parent {
    align-content: center !important;
}
</style>

RESULT:

image
image1908×913 240 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

4

Hi Moeed, thank you for taking the time to respond. I tried your solution and it does fix the hover issue but it has also made the menu items move up. I’m not sure how to solve this.

Example:

Screenshot 2026-07-13 at 8.45.39 pm
Screenshot 2026-07-13 at 8.45.39 pm1920×428 148 KB

5

I see, I have updated my code above. Remove the previous code and add the updated code again.

Best,
Moeed

6

If this is a Shopify Made theme AND it’s not some menu from and app AND the problem exists when first installing the theme you need to be a bit more aggressive with getting them to take responsibility for a bug
But you must Double check and install a fresh copy of the theme from the theme store to make sure you didn’t break something.
If it’s not in a new copy either a bug was fixed, OR more likely during your setup you broke something.

This seems to be because a pseudo element on the list items that’s part of the behavior is being given a height causing it to be offset.
possible bandaid:

/* 2026-07-13  PaulN. - bandaid weird menu hover behavior in theme Clarity v4.1.1 */
.menu-list__list-item:not([slot=overflow]):after { height: 0; }
7

Hi Paul, thank you very much. I put your ‘bandaid’ in the header CSS and it appears to be the smoothest fix.

I did check a beginning version of the site and the issue was still present, I’m only just picking up on it now as I make progress. I am still new to all of this but from speaking to Shopify support they said they contacted the developer of the theme which is actually called ‘Horizon’ despite it saying ‘clarity’ and they said that it was ‘designed that way’. I did tell them that made no sense but here we are. I will take your advice on for any future bugs, thanks again.

8

Thank you for your help Moeed, I have found a smoother solution but I really appreciate your help.