the mobile menu is being overlapped by the free shipping bar.

Technical Q&A

Topic summary

A mobile menu is being overlapped by a free shipping announcement bar, preventing users from accessing the close (X) button in the upper left corner.

Proposed Solution:

  • Use CSS media queries to adjust element layering (z-index values)
  • Increase the mobile menu’s z-index so it appears above the shipping bar

Current Status:

  • Multiple developers have requested the store URL and password (if applicable) to investigate further
  • The issue remains unresolved pending access to the site for troubleshooting
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

the mobile menu is being overlapped by the free shipping bar. whenever I open it the bar never stays “behind” the menu it overlaps it and blocks off the “X” icon in the upper left of it.

1 Like
2

Hello @Atorius ,

On mobile device using media query css change the priority of the elements ( z-index )
Increase the z-index of mobile menus so they will appears over the shipping bar.

Regards
Guleria

3

Hello @Atorius
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

4

Please share your store url and also password if it is password protected. Then community developer can help you

Thank you