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

[nishant0037]

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?

[GTLOfficial]

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

[Small_Task_Help]

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

<div class="drawer-overlay"></div>
<div class="drawer-menu">
  <!-- Drawer menu content -->
</div>