Adjust Mobile Menu Drawer Size to full screen

[Digital_Imran]

Hello everyone,

I actually need help with increasing the mobile menu drawer to cover the full screen. Currently, it does not cover the full screen. Below, I’ve attached a picture of a sample full-screen mobile menu drawer.

I'm using the Impact theme.

Here is my store URL: corecxfashion.myshopify.com

Here is the sample store with the full-screen mobile drawer menu that I really like: threadheads.com

Thank you in advance for your help!

[rajweb]

Hey @Digital_Imran ,

To make your mobile menu drawer cover the full screen, similar to the sample you provided, you can modify the CSS in your Impact theme. Here's a step-by-step guide:

Follow these steps:

1. Online store 

2. Themes

3. Edit Code

4. Open the theme.css or base.css(or similar CSS file in your theme)

5. Look for classes related to the mobile menu or drawer. These might be named like .drawer, .menu-drawer, or similar.

6. Adjust the CSS for Full-Screen Drawer:  Add or update the following CSS to ensure the menu drawer spans the full screen:

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full screen width */
    height: 100vh; /* Full screen height */
    background-color: #fff; /* Ensure it has a background */
    z-index: 1000; /* Ensure it appears above other elements */
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

7. Check the Drawer Container: If your drawer has a child container, ensure it also spans the full height: 

.drawer-container {
    height: 100%;
    overflow-y: auto;
}

8. Compare With the Sample Store: For further fine-tuning, open the sample store in a browser, inspect their mobile menu styling, and replicate relevant styles in your theme.

Would you like detailed instructions for finding and inspecting the relevant code? 

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[Digital_Imran]

 I'm sorry, but I believe this is a solution generated by AI tools such as ChatGPT, so it may not work as intended. Thank you for your response.

[steve_michael2]

Hi @Digital_Imran  

Your store URL is not working. Please provide correct Url

[Digital_Imran]

Hello @steve_michael2  could you please try this one : corecxfashion.com

By the way I'm using Impact theme

[steve_michael2]

Still Url is not working

[Digital_Imran]

I'm sorry
Please try this URL: https://myperfectwear.com/

[GTLOfficial]

Hello @Digital_Imran 
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

#header-sidebar-menu {
bottom: 100px !important;
top: 80px !important;
}

result

Thanks

[Digital_Imran]

Thank you so much! However, this solution increases the bottom spacing of the menu. I want it to be full-screen. Currently, it is centered.

Example: threadheads.com

[steve_michael2]

Hi @Digital_Imran ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:767px){
.navigation-drawer::part(content) {
    min-height: 97vh!important;
}
.drawer {
        
        --drawer-content-max-height: 94vh !important;
 }
}
:is(.drawer,.popover)::part(outside-close-button){
   bottom:80% !important;
}
ul.v-stack.gap-4 {
    padding-top: 27px !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[Digital_Imran]

Thank you so much @steve_michael2 it works but the close menu button is appearing in the center of the menu. Below is a screenshot I highly appreciate if you could help

[steve_michael2 · Accepted solution]

@media(max-width:767px){
.navigation-drawer::part(content) {
    min-height: 97vh!important;
}
.drawer {
        
        --drawer-content-max-height: 94vh !important;
 }
}
:is(.drawer,.popover)::part(outside-close-button){
   bottom:100% !important;
}
ul.v-stack.gap-4 {
    padding-top: 27px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

"Only set the bottom property to 100%."

[Digital_Imran]

Thank you soooo much @steve_michael2  😄