I want to disable scroll once someone clicks on the Drawer Menu. Please help!

Shopify Discussion
1

nishant0037_0-1722583780164.png
nishant0037_0-1722583780164.png1876×829 128 KB

As you can see, once the drawer menu is selected, only a certain section of the page gets covered with a transparent black background. Is there a way i can extend the menu and the black transparent background to the bottom of the screen? If that is not possible, is there a way i can disable scroll when someone clicks on the drawer menu, and the black transparent background covers the entire screen?

2

Hello @nishant0037
Please provide the URL and password of your website.

3

Hi,

Need Adjust CSS for the Overlay and update HTML structure (It will be great if you share your store URL)

CSS example

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
  z-index: 999; /* Ensure it’s above other content */
  overflow: hidden; /* Prevent scroll */
}

.drawer-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px; /* Adjust width as needed */
  height: 100%; /* Full height */
  background: #fff; /* Background color of the drawer */
  z-index: 1000; /* Ensure it’s above the overlay */
  /* Add other styling as needed */
}

HTML Structure Example