Dawn Theme - How To Disable Vertical Scroll When Menu Is Open

Store Design
, , , ,

Topic summary

A user reports that when the mobile menu drawer opens on the Dawn theme, scrolling within the drawer causes the menu to scroll off the page.

Proposed Solutions:

Two community members suggest adding CSS code to prevent this behavior:

  • Solution 1: Add html:has(Details.menu-drawer-container[open]) { overflow: hidden; } to the bottom of the base.css file
  • Solution 2: Add similar code to the bottom of the theme.liquid file

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate either base.css or theme.liquid file
  3. Paste the provided CSS code at the bottom
  4. Save changes

Outcome:
One user confirms the solution works perfectly for their Dawn theme. However, the original poster reports the fix is not working for them, leaving the issue unresolved in their case.

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

When the mobile menu drawer is openend and someone scroll’s on the drawer, the menu goes off page.

Screen Shot 1945-08-04 at 11.55.11 AM.png
Screen Shot 1945-08-04 at 11.55.11 AM.png293×631 13.6 KB

My shop url : Puretive.co

2

Hi @Karan_huedlife

You can try to add this code at the bottom of your base.css file in Online store > Themes > Edit code

html:has(.Details-menu-drawer-container[open]) { overflow: hidden; }
3

Hi @Karan_huedlife ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

2 Likes
4

Thank you, this works perfectly for me!

Shopify dawn theme

5

No man it’s not working for me.

6

Hi @Karan_huedlife

I’m so glad if my suggestion can be your solution