change drawer's shadow color - craft theme

Store Design
, , , , ,

Topic summary

A user seeks to modify shadow colors for two drawer elements in the Craft theme when viewed on mobile: the Menu drawer and the Filter & Sort drawer. The shadows currently appear red, and the goal is to change them to grey.

Solutions Provided:

  • One approach suggests adding custom code to the theme.liquid file, placed above the closing </body> tag.

  • Another solution involves editing CSS files (main.css, base.css, or theme.css) by adding specific code targeting the header icon menu with expanded aria attributes:

.header__icon-menu[aria-expanded=true]::before {
    background: grey;
    opacity: .5;
}

Both solutions were marked as helpful by the original poster. A follow-up question asks about changing the shadow color for the “filter and search” drawer on mobile as well, which remains unanswered.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I’m unable to find the code location for changing two drawer’s shadows. Currently when viewing on mobile, the shadow color of my Menu drawer and the Filter & Sort drawer are a red color. I would like to make them a grey color.

pics of the menus are linked here: https://imgur.com/a/5tdtW23

1 Like
2

Hey @vvyan

Share your store URL and Password if enabled.

Best Regards,

Moeed

3

url -a2d014-b6.myshopify.com

pass - test99

Yes of course, meant to add to the post, sorry!

4

Hey @vvyan

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hi @vvyan

Do you mean like this?

Made4uoRibe_0-1723410236651.png
Made4uoRibe_0-1723410236651.png786×747 62.6 KB

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.header__icon--menu[aria-expanded=true]:before {
    background: grey;
    opacity: .5;
}

And save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

thank you!

7

thank you this is also great!

8

do you happen to know what code can change the shadow color for the “filter and search” when viewed on mobile as well?