How can I change the color of my mega menu text?

Store Design
, , , , ,

Topic summary

Main issue: change dropdown (mega menu) text color to green and fix inconsistent hover behavior; some menu items didn’t respond to earlier CSS, with only certain items changing.

Context: The initial CSS applied in theme.liquid didn’t affect all links. A website link was provided for reference.

Suggestion: Edit Online Store > Edit code > assets > base.css and target the correct elements (example given: #MegaMenu-Content-2 .list-unstyled a { color: #f00 !important; }). Also verify specific menu classes if coloring items individually.

Resolution: The issue was resolved by correcting the CSS selector—removing the “.mega-menu__link–active” part—so styles applied broadly to the intended menu text. The helper’s guidance also helped identify the right selector for submenu (“subtext”).

Outcome: Color and selector issues addressed via base.css with proper targeting. The discussion is resolved; no further open questions noted.

Summarized with AI on January 18. AI used: gpt-5.
1

Hi,

I would like to know how i change the text color i marked yellow of my dropdown menu to green?

BelloNL_0-1694203114674.png
BelloNL_0-1694203114674.png399×123 14.9 KB

Also, it has come to my attention that if you hover over the text (circled in red), the hover color doesnt change like it does to the text which is not circled. As a matter of fact, the text which is not circled in red doesnt respond to any coding. It also appears that the circled text remains the same color and is the ONLY text changing after coding in theme.liquid. All of my other pages face the same issue with the text not responding to any code, just like the main page does to the text which is not circled.

The code i used for changing the menu texted marked in green is:

The link to my website is: https://dustclean.nl/

2

Hello, @BelloNL Do you some kile this

oscprofessional_0-1694588582859.png
oscprofessional_0-1694588582859.png1671×857 207 KB

Go to the online store > Edit code > assets > base.css

#MegaMenu-Content-2 .list-unstyled a {
  color: #f00 !important;
}

or you are all menu seprate color individually check menu class and apply css

1 Like
3

Hello [email removed]Oscprofessional,

I fixed my own issue, apparently the code i sent above was not the right code. It shouldve been:

without the ‘’.mega-menu__link–active’’ behind it. But thanks for your help and finding the right code for the subtext. Much appreciated !