Solved

can't open my menu on mobile view

osamayasin
Tourist
5 0 1

Hi this is Osama Yasin 

I can't open my menu Please help to fix this problem.

I am attaching the short video below, or visit my website: https://www.samsdry.com/ 

NOTE : The problem is only on mobile not one the web

Accepted Solutions (2)

shreyhweb
Shopify Partner
627 110 112

This is an accepted solution.

@osamayasin 

Hello,

 

Please add below code above </body> in theme.liquid

 

Online store >> customize >> theme.liquid

 

<style>
@media screen and (max-width: 767px) {
div#menu-drawer {
    height: 100vh!important;
}
.menu-open div#menu-drawer {
    transform: translate(0%)!important;
    visibility: visible!important;
}
}
</style>

 

after added

shreyhweb_0-1704393968935.png

 

If our solution is helpful for you then please like and accepted.

Thankyou 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

View solution in original post

shreyhweb
Shopify Partner
627 110 112

This is an accepted solution.

replace the whole given code. Please add this below code.

 

<style>
div#menu-drawer {
    height: 100vh!important;
}
.menu-open div#menu-drawer {
    transform: translate(0%)!important;
    visibility: visible!important;
}
</style>
- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

View solution in original post

Replies 4 (4)

shreyhweb
Shopify Partner
627 110 112

This is an accepted solution.

@osamayasin 

Hello,

 

Please add below code above </body> in theme.liquid

 

Online store >> customize >> theme.liquid

 

<style>
@media screen and (max-width: 767px) {
div#menu-drawer {
    height: 100vh!important;
}
.menu-open div#menu-drawer {
    transform: translate(0%)!important;
    visibility: visible!important;
}
}
</style>

 

after added

shreyhweb_0-1704393968935.png

 

If our solution is helpful for you then please like and accepted.

Thankyou 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
osamayasin
Tourist
5 0 1

Screenshot_20240105_134053_Chrome.jpgScreenshot_20240105_134105_Chrome.jpgScreenshot_20240105_133447_Chrome.jpg

Thank you, but there is another problem when I switch to landscape mode or desktop mode again. Same problem, and the account button is missing. What can I do?  please check                                                                                                                          Screenshot 2024-01-05 134651.png 

In this image, you can see that the button is clearly visible.

 

shreyhweb
Shopify Partner
627 110 112

This is an accepted solution.

replace the whole given code. Please add this below code.

 

<style>
div#menu-drawer {
    height: 100vh!important;
}
.menu-open div#menu-drawer {
    transform: translate(0%)!important;
    visibility: visible!important;
}
</style>
- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
osamayasin
Tourist
5 0 1

Thank You