How to change background color and text on the Submenu

Shopify Discussion

Topic summary

Goal: Change the submenu background to white and text color to #83CBC4, specifically for the “Originals” subcategories (All Originals, Drawings, Paintings, etc.).

Context/inputs:

  • Store URL was shared for review.
  • Shopify support reportedly said the theme is an older version, so changes require custom coding (not via theme settings).
  • A screenshot example was provided to illustrate the desired look.

Proposed solution:

  • One reply suggested adding custom CSS in Online Store → Themes → Edit code → base.css, within a desktop media query (min-width: 769px):
    • Target .header__submenu.list-menu to set background: white and text color: #83CBC4 (using !important).
    • Adjust .header__menu-item:hover to a #9cc9c6 background with white text.
  • Another contributor confirmed they would provide custom CSS shortly and asked for confirmation of the desired style.

Current status:

  • OP noted attempts via settings didn’t work; coding is required.
  • The provided CSS targets the general submenu and hover state; tailoring it only to the “Originals” submenu has been requested.
  • No confirmation of a working, final solution yet; discussion remains open.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi everyone, can somebody help me please on how to change the background color of the submenu into white and the text color into #83CBC4? Thank you so much!

file.jpeg
file.jpeg170Ă—266 9.21 KB

1 Like
2

Please share your store url

3

Hi Ahmad, here’s my Website URL

4

Hi Steven, here’s my Website URL

1 Like
5

Hi Dariokc, I tried to set it up to my settings but didn’t work. The shopify chat support told me that i’m using an old version so it needs coding to set up

6

Do you want like this ?

Ahmad31_0-1732840536136.png
Ahmad31_0-1732840536136.png274Ă—433 9.05 KB

7

Only the subcategories under Originals which are the ALL ORIGINALS, DRAWINGS, PAINTINGS, and so with others please

8

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

@media only screen and (min-width: 769px) {
.header__submenu.list-menu {
background-color: #fff !important;
color: #83CBC4 !important;
}
}
.header__menu-item:hover {
background-color: #9cc9c6 !important;
color: white !important;
}
}

Thanks

9

OK, it,s not a big game you need to add some custom css i will provide you the code after sometime