Drawer menu does not change transparent header color and text color different for mobile

Shopify Discussion
,

Topic summary

Issue: Drawer menu overlay doesn’t affect the transparent header, and mobile menu text should be white like desktop. Screenshots show desired vs current desktop/mobile states.

Key steps taken:

  • Private message requested for store URL/password to inspect.
  • Mobile text color addressed by adding CSS in base.css/theme.css:
    • .menu-drawer__menu-item { color: white !important; }
  • Header/overlay alignment attempted by moving drawer to the very top:
    • In component-menu-drawer.css: .menu-drawer { top: 0% !important; }
    • Alternative in base.css: #menu-drawer { top: 0 !important; padding-top: 50px !important; }
    • Another suggestion to place CSS before in theme.liquid (details unclear).

Results/feedback:

  • Text color fix works. After top adjustments, the drawer aligns to the top, but the close “X” becomes unclickable and colors look off.
  • Further replacement code was suggested, but not clearly provided/confirmed.

Status: Partially resolved. Mobile text color is fixed; header behavior and close-button interactivity remain problematic. Likely remaining needs: correct selector use (.menu-drawer vs #menu-drawer), proper z-index/overlay and padding matching header height, and ensuring the close button remains clickable. Discussion open with no final solution confirmed.

Summarized with AI on December 22. AI used: gpt-5.
1

Hi!

I’m having some trouble with my drawer menu. I managed to make the drawer transparent with a slight blur but once I open the drawer menu, it does not change the transparent header. I would like the drawer menu to also change the header. I have this problem for the mobile layout as well. Besides this problem for the mobile layout, I would like the text on the mobile layout to be white as well (just as in the desktop layout).

I hope this is doable for anyone that could help. Thanks so much in advance!

This is how I would like to have it

Screenshot 2024-08-14 at 13.36.46.png
Screenshot 2024-08-14 at 13.36.46.png1141×1316 155 KB

This is what i have now on the desktop

Screenshot 2024-08-14 at 13.37.17.png
Screenshot 2024-08-14 at 13.37.17.png1076×1253 98 KB

This is what I have now on the mobile

Screenshot 2024-08-14 at 13.38.15.png
Screenshot 2024-08-14 at 13.38.15.png375×601 272 KB

2 Likes
2

Hello @aclothingbrand
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

1 Like
3

Hello @aclothingbrand
Please provide the website URL with password

1 Like
4

Hi @BSS-TekLabs !

Is there a way to privately send you the website address as well as password?

Thanks!

1 Like
5

Please go to my personal page then select “Send message” @aclothingbrand

1 Like
6

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.menu-drawer__menu-item {
    color: white !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1723637609436.png
BSSTekLabs_0-1723637609436.png378×817 339 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
7

Thank you so much @BSS-TekLabs ! Do you also maybe know how to fix the first problem regarding the header?

Thanks in advance!!

1 Like
8

ok. Let me check

1 Like
9

Hello @aclothingbrand

Go to online store ----> themes ----> actions ----> edit code ---->assets ----> component-menu-drawer.css
add this code at the end of the file.

.menu-drawer {
    top: 0% !important; 
}

result

9.png
9.png484×832 464 KB

8.png
8.png1340×919 193 KB

If this was helpful, hit the like button and accept the solution.
Thanks

10 
#menu-drawer {
 top: 0 !important;
    padding-top: 50px !important;
}

Can you add more this code @aclothingbrand

BSSTekLabs_0-1723638236472.png
BSSTekLabs_0-1723638236472.png372×814 327 KB

11

Do you mean like this? Because I don’t think this works unfortunately..

Screenshot 2024-08-14 at 14.30.41.png
Screenshot 2024-08-14 at 14.30.41.png302×119 7.62 KB

1 Like
12

Add them one more line down after the }. Put it on the last line.

13 
.menu-drawer__menu-item {
    color: white !important;
}
#menu-drawer {
 top: 0 !important;
    padding-top: 50px !important;
}

The final code should look like this. Add it to the last line of the base.css file. @aclothingbrand

14

or can you try add this code before tag in file theme.liquid @aclothingbrand
1 Like
15

It works sort of..! The menu is now at the top of the page and it is not possible to click the ‘X’ to close the menu anymore. Besides this, the colors seem a bit of.. haha. But thanks a lot for the effort. If you maybe know how to fix this, im open to anything @BSS-TekLabs

1 Like
16

Can you replace to this code @aclothingbrand

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
17

Have you tried new solutions? Did they work @aclothingbrand ?