Menu overlay shadow problem

Store Design
,

Topic summary

A mobile site menu has a shadow overlay blocking user clicks, preventing interaction with menu items.

Solution Provided:
A CSS fix was shared targeting the .country-selector__overlay class:

  • Set position: relative !important; for screens under 749px width
  • This removes the overlay from the fixed layer that was blocking menu interactions
  • The original poster confirmed this solution worked

Ongoing Issue:
Another user (aukcli ff.com) reports experiencing the same navigation modal problem, but the provided CSS code did not resolve their issue. This case remains unresolved and may require site-specific troubleshooting.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have a problem about side menu on my mobile site. There is a shadow which block the clicking of users.

Any solution? Thank you.

Screen Shot 2025-03-21 at 11.36.13.png
Screen Shot 2025-03-21 at 11.36.13.png434×690 18.8 KB

1 Like
2

Hey @catotoi could you please share your Store URL and password so that I take a look and provide you Solution code.

Thanks

3

Hello @catotoi

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

Hey there,

Please add this CSS in your base.css file, it should solve the issue. Using position: relative changes how the overlay is positioned in the document flow, removing it from the fixed layer that was blocking interactions with your menu.

@media screen and (max-width: 749px) {
    .country-selector__overlay {
        position: relative !important;
    }
}

Cheers!
Shubham | Untechnickle

5

Thank you very much. It worked.

6

Hello

I’m experiencing the same issue on the navigation modal on my site aukcliff.com.
I tried the code you suggested and it did not work.
Any ideas?

Thank you