Sub-menu overlapping menu only on mobile site

Store Design
, , ,

Topic summary

Mobile sub-menu overlaps the main menu on phones (desktop works). A screenshot was attached to show the overlap.

Initial responses asked for the store URL/password to diagnose. One contributor suggested adding Custom CSS to make mobile dropdowns position: static, full-width, hidden by default, and revealed on parent click, with indentation for submenus.

The issue was resolved by the original poster after reviewing the mobile menu CSS with Gemini. They shared the final fix:

  • Corrected a typo in the background variable for the sub-menu’s background-color.
  • Added z-index: 20 to .mobile-menu .sub-menu so it appears above the main menu.

Outcome: Problem resolved; no further action requested. A moderator noted moving the thread to the design category. No lingering questions remain.

Summarized with AI on December 11. AI used: gpt-5.
1

Dropdown menu and sub-menu work fine on desktop, but overlaps horribly on mobile. Pic attached. If anyone knows how to fix this, I’d be grateful.

589561149_859100249992509_3117129152092160706_n
589561149_859100249992509_3117129152092160706_n1080×658 35.3 KB

2 Likes
2

Hi @SoFarr I’m @PaulNewton shopify-partner and a theme customizer.
You can reach out to me for theme repair services.
:speaking_head: :postbox: CLICK profile-pic on forums for options to connect.
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

3

Hi @SoFarr

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide the exact solution.

If you need more help, you can message me here anytime or click my profile icon to see connect options.

Best regards,
Devcoder :laptop:

4

Please share the link to your page so we can check

5

Hello, @SoFarr

Please share your store URL and password, if it’s password-protected.

Thank you!

6

Hi @SoFarr

Add this to Online Store → Themes → Customize → Theme Settings → Custom CSS:

/* Mobile menu fix */
@media only screen and (max-width: 768px) {
  .site-nav__dropdown, .site-nav__dropdown .site-nav__dropdown {
    position: static !important;
    width: 100% !important;
    display: none; /* hide by default */
  }

  /* Show submenu when parent is clicked */
  .site-nav__item--has-dropdown.open > .site-nav__dropdown {
    display: block;
  }

  .site-nav__dropdown .site-nav__dropdown {
    padding-left: 20px; /* indent submenus */
  }
}

Try this, hope it’ll work.

7

Thanks everyone who reached out, problem is all resolved now. I copied the code snippet for the mobile menus from the CSS into Gemini and asked it to correct the issue for me. All good now!

8

For future merchants can you share the CSS difference that fixed it.
Going to get this moved to design.

9

Of course, here is the fix:

/* Fix for overlapping sub-menus */
.mobile-menu .sub-menu {
  /* This fixes the typo in the original background variable */
  background-color: var(--color-header-bg, var(--bg-body, #ffffff)) !important;
  
  /* This ensures the sub-menu sits on top of the main menu */
  z-index: 20 !important; 
}