How Can I change the background of text colour of my dropdown menu?

Store Design
1

Hi there!

I’m trying to edit the colour of text or background of the header menu and everywhere I look it says to inject code in the Assets / theme. scss. liquid file but there is no such file under assets or any where else… please help!

1 Like
2

@LaurenE for us to know what file you have to inject the code into, please provide a link to your store so we can see the theme. Thanks!

3

My apologies

https://coastalcafestudios.com/

4

@LaurenE

Your code would be located in assets/base.css (or assets/base.css.liquid). Whichever one you see in the assets folder, but the pre-fix is base.css. If this answer satisfies your question, please don’t forget to Like and Accept as Solution. Thank You!

5

Hi @LaurenE

Happy to help you with this issue
Please follow the below steps to find your theme style file to edit the code

  • Step 1: Go to your Themes page. Navigate to Online Store > Themes. …
  • Step 2: Click Edit code. In the Actions dropdown menu, click on Edit code to get to the code editor.
  • Step 3: Find the Assets folder for CSS files and edit the base.css file.
6

I found the code now how do I make the drop-down menu text or background colour different without changing the overall colours I’ve picked? or is that not possible?

7

@LaurenE If you want to change the background-color and font color of the menu drawer, add the following code to the bottom of the component-list-menu.css (you may see component-list-menu.css) file in the Assets folder. If this answer satisfies your question please don’t forget to Accept as Solution. Thanks!

.menu-drawer {
  background-color: white;
}

.menu-drawer .menu-drawer__menu-item {
  color: black;
}