Why isn't my online store menu opening on mobile devices?

Store Design
, , , , , ,

Topic summary

A mobile menu navigation issue was preventing the hamburger menu from opening on a Shopify store. The problem was isolated to the homepage only, while the product pages functioned correctly.

Root Cause:

  • Inconsistent code between homepage header and product page header
  • Missing or improperly applied CSS class (‘act’) that controls dropdown menu open/close behavior

Solution:

  • Code snippet provided to add to the theme.liquid file
  • The fix specifically targets the CSS class responsible for dropdown menu functionality

Outcome:

  • Issue resolved successfully after implementing the suggested code changes
Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hey there! I have an issue with the online store that I recently built. The entire menu isn’t working on mobile devices. After clicking on the menu icon at the upper left corner - nothing opens. I spent over 3 hours trying to fix that myself, but unfortunately, nothing worked.

My online store link is: kylie.ae

Thanks!

2

For some strange reason the code in your home page header is different than the code on the product page, when they should be exactly the same.

On your product page it works perfectly. That’s why this code will only affect your home page.

I have been looking at the behavior of the styles for hours, the one that interests us is the class called ‘act’ that is applied to the drop-down menus to be able to open and close them.

I hope this code works for you. Remember that you must add it to your theme.liquid.

2 Likes
3

Thanks a lot! That worked perfectly!

1 Like