Drawer menu isnt showing and makes screen gray

Technical Q&A
,
1

drawer menu on my website

doesnt work, it makes the screen grey and dont open any menu

2

I also have an error in my theme.liquid

image
image808Ă—756 28.7 KB

3

@user3579 please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

.menu-drawer-container.menu-opening .menu-drawer{visibility: visible !important;}
4

NO, this is not to be fixed with CSS.

Follow this recommendation:

5

can u tell me how to restore it?

6

There is a link to github with the theme original source code in the linked post

Go to your site, Online Store, then “Edit theme code”

Screenshot 2025-12-06 at 12.08.27 AM
Screenshot 2025-12-06 at 12.08.27 AM733Ă—318 39.3 KB

Go to layouts/theme.liquid and restore the very top of that file – first 2 lines, I believe.

You can actually try adding a direction as well – it may help because I see there are attempts to fix it with CSS…

<html class="js" lang="{{ request.locale.iso_code }}" dir="rtl">
7

it worked thx, but now theres

a new error and the menu appears out with no animation

image
image810Ă—651 35.2 KB

8

This warning you can safely ignore. See Problem in the liquid theme code - #6 by tim_1

I actually see animation, it’s just it’s a bit strange, probably because of RTL.

9

theres a way to make the menu appear on the right site with normal animation

?

10

@user3579 try my given css, if any issue appears we can try to solve it

11

it didnt do nothing, the menu still appears on the wrong side with bad animation

12

Theme already has CSS to show menu drawer. It does not work because <html> misses the class js. Actually, there was no <html> in their theme code at all.
Your may work, but without <html> their HTML code is still invalid.

13

Ok, so you want your menu to slide in from the right?
Even though the open and close buttons are still on the left?

14

image
image1266Ă—472 75.7 KB
look, my buttons are on left side and the menu opens from right

15

@user3579 add this line

.js details[open].menu-opening>.menu-drawer{left: 0 !important;}

image
image1366Ă—768 88.6 KB

17

Ok, if you need to keep buttons on the left, but menu should slide in from the right, add this to the “Theme settings”(cog icon)=> “Custom CSS”:

.menu-drawer {
  transform: translate(100%);
}
18

to where? and theres a way to make all text in middle

19

@user3579 add to the very end of your base.css file, also to make it center, add this line as well

.list-menu__item{justify-content: center;}
.menu-drawer__account {justify-content: center;  width: 100%;}

image
image1366Ă—768 89.3 KB

20

The code I mentioned should go to this entry field:

.menu-drawer {
  transform: translate(100%);
}

Screenshot 2025-12-06 at 12.33.52 AM
Screenshot 2025-12-06 at 12.33.52 AM367Ă—550 25.1 KB

21

thanks it worked, but the animation doesnt work on computer