Solved

How To Make Text In Menu Drawer White? (Dawn)

milkandcookies
Tourist
368 0 41

Hi,

How can I make the menu drawer text white:

milkandcookies_0-1707249319033.png

 

https://d10cbe-2.myshopify.com/products/signature-25-pack-pop-box

thanks in advance!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5102 1217 1488

This is an accepted solution.

Hi @milkandcookies 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.list-menu a {
    color: white;
}

 

And Save. 

Result:

Made4uoRibe_0-1707249799925.png

If you hover the text it will turn to black. 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
5102 1217 1488

This is an accepted solution.

Hi @milkandcookies 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.list-menu a {
    color: white;
}

 

And Save. 

Result:

Made4uoRibe_0-1707249799925.png

If you hover the text it will turn to black. 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


milkandcookies
Tourist
368 0 41

thank you! how can I change the hover color to white instead of black?

Made4uo-Ribe
Shopify Partner
5102 1217 1488

Please, replace the code on this. 

 

.list-menu a, .list-menu a:hover {
    color: white;
}

 

And Save.

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


milkandcookies
Tourist
368 0 41

thanks @Made4uo-Ribe! any chance you know how to change the background shadow color too (circled below)?

milkandcookies_1-1707251454553.png

 

 

Made4uo-Ribe
Shopify Partner
5102 1217 1488

Add to the code. 

 

.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    background: transparent;
}

 

And save. 

 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


milkandcookies
Tourist
368 0 41

I added it, but it didn't make the background transparent 😕

Made4uo-Ribe
Shopify Partner
5102 1217 1488

Add some important. 

 

.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    background: transparent !important;
}

 

And save. 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


milkandcookies
Tourist
368 0 41

thank you! Just a quick question - I have a pink hex code that normally looks like this:

milkandcookies_1-1707253463924.png

But now the same hex code is appearing more dim on the menu drawer:

milkandcookies_0-1707253443322.png

How can I make the pink text in the menu drawer brighter (aka its natural shade of color)?