Change the Craft theme header drawer background color

[Rigour]

Hello,

When I open the header drawer, the color is white. I would like to be able to change the color (#182308). I would also like to be able to change the font color within the header drawer (#F5BE98)

Any help is appreciated,

Thank you

[GTLOfficial]

Hello @Rigour
Please provide url and password of your store.

[Rigour]

https://rigourandgrace.ca/password

HelloThere

[GTLOfficial]

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

.menu-drawer__navigation {
background-color: #182308 !important;
}
.list-menu__item {
color: #F5BE98 !imporetant;
}
.menu-drawer__utility-links {
background-color: #182308 !important;
}
.list-social__item .icon {
color: #F5BE98;
}
.header--has-social .menu-drawer__utility-links {
background-color: #182308 !important;
}

result

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

[Rigour]

There was no change when I entered the code.

[GTLOfficial]

Try This:-

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

[Rigour]

The background of the drawer is now the correct color! The font is not, it is dark grey / hard to see.

[GTLOfficial]

Check the color code you provided and the color code in my coding.

[Rigour]

I have double checked. it is the correct code.

Even copy and pasted from the color code menu

[GTLOfficial]

then you might have also checked the screenshot, i sent you.
is there a color difference…???

[Rigour]

Yes.

[ZestardTech]

Hello @Rigour ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.menu-drawer__navigation-container > .menu-drawer__navigation{
        background-color: #182308!important;
}

nav.menu-drawer__navigation ul li > a {
    color: #F5BE98 !important;
}

Let me know if you need further assistance!

[websensepro]

Hi @Rigour

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[DaisyVo]

Hi @Rigour

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

nav.menu-drawer__navigation * {
    color: #F5BE98 !important;
}

Here is the result:

I hope this helps

Best,

Daisy

[Rigour]

Thank you!