Dawn theme mobile header menu drawer troubleshooting - urgent

Store Design
, , , , , , ,
1

I’m using dawn theme in that I need to troubleshoot and customize the the mobile header menu drawer, when opened the drawer menu it was good, but when we scroll the drawer menu there is some transparent space where all the contents are shown.

website: https://2512in.myshopify.com/

password: 2512

2

Here is the reference image

Screenshot 2025-03-19 124408.png
Screenshot 2025-03-19 124408.png531×785 21.8 KB

Screenshot 2025-03-19 121832.png
Screenshot 2025-03-19 121832.png538×790 41.2 KB

3

Hi, two issues - the first one is that there should be added logic - blocking the body tag when the drawer is opened (in JS), you can scroll now after opening a drawer. Second, the drawer is not full height. Try this to fix styles. The second value in the calc logic is the header height, you can also use dynamic variable value.

@media screen and (max-width: 749px) {
.menu-drawer {
  height: calc(100vh - 65px);
}
}
4

You have an app Ecomsend popups(?) which sets overflow: initial; on body element. This conflicts with the theme code.

You may reach out to the App support, stop using the app, or, you can add this rule to the “Custom CSS” setting under Theme settings:

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden !important;
}

This will make theme code override style set by app.

1 Like