Mobile dark display

Technical Q&A
, , ,

Topic summary

A Shopify store owner reports that their mobile site displays darker when the menu button is clicked, and the menu becomes unresponsive afterward. They suspect a mobile menu overlay issue or JavaScript/CSS conflict but lack coding experience.

Proposed Solution:

  • Navigate to Edit code in the Shopify theme editor
  • Locate the style.scss.css file
  • Add the following CSS at the end of the file:
div#slideout-overlay {
    display: none !important;
}

This code hides the slideout overlay element that may be causing the darkening effect. A screenshot demonstrates the expected result after implementing the fix.

Status: Solution provided but not yet confirmed as resolved by the original poster.

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

My Shopify website displays darker on mobile only when the menu button is selected and then the menu is unresponsive. What can I do to fix this?

I dont know if there might be an issue with the mobile menu overlay or a conflict with JavaScript or CSS affecting the mobile view. I don’t have experience with coding, can someone help me?

2

Hi Chantelle3

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file style.scss.css and add this code at the end of the file

div#slideout-overlay {
    display: none !important;
}

Result:

LizHoang_0-1738896496998.png
LizHoang_0-1738896496998.png351×617 54.9 KB

Best,
Liz