Can't change the text color of one item in navigation menu

You can simply use an extra level of specificity:

html .genesis-nav-menu li a {
    color: #222;
}

Do I just put this in CSS?
The color code you gave me is what I’m trying to change, what I meant is to override the .genesis-nav-menu with the first code(#menu-item-81).

I’ve tried it like this:

html #menu-item-81 a {
  background-color: #eb232f;
  	color: #fff !important;
}

and

html #menu-item-81, genesis-nav-menu-li a {
  background-color: #eb232f;
  	color: #fff !important;
}

With and without the !important, unfortunately they didn’t help.

Do I just put this in CSS?

Yep, the Custom CSS plugin that you’re using.

https://angrytipster.xyz/?sccss=1&ver=4.5.3

Have you cleared the cache after changing the css code? I see you use W3 Total Cache plugin. It seems cache issue.

Yep, the Custom CSS plugin that you’re using.

I did try that, didn’t change anything ??

Have you cleared the cache after changing the css code?

Yes, I cleared it every time! Also testing sometimes with ‘inspect’ option in chrome to try and see how the text reacts to code in real time but nothing seems to work

If you look at the Custom CSS plugin, it looks like the code you’re saying should be there (and the code I recommended) is absent. So that’s why it appears to be a caching issue: https://angrytipster.xyz/?sccss=1&ver=4.5.3

By the way, I accidentally posted ‘#222’ as the colour in my recommendation. You can change that.

Also testing sometimes with ‘inspect’ option in chrome to try and see how the text reacts to code in real time but nothing seems to work

It works with inspect element in chrome https://prntscr.com/c0ngdp

Whether something is working in inspect element doesn’t necessarily mean you’re using the right selectors. When you create new CSS rules in the inspector tool, it is effectively in another stylesheet loaded after all of your website’s stylesheets.

I see that you went for this option;

html #menu-item-81 a {
  background-color: #eb232f;
  	color: #fff !important;
}

In that case you don’t need the additional selector of “html” because the ID dominates.
https://developer.mozilla.org/en/docs/Web/CSS/Specificity

It works with inspect element in chrome https://prntscr.com/c0ngdp

It didn’t work for me in inspect but it does work now! It actually took a while to show up.

Thanks guys! I didn’t know that adding “html” to the code can help override things like this.

By the way, I accidentally posted ‘#222’ as the colour in my recommendation. You can change that.

Yeah, I wasn’t gonna argue so I just tested both of them, the one with the correct color didn’t show up on page within the first minute and I changed it =p

Thanks again guys, really appreciate this!

I see that you went for this option;
html #menu-item-81 a {
background-color: #eb232f;
color: #fff !important;
}
In that case you don’t need the additional selector of “html” because the ID dominates.
https://developer.mozilla.org/en/docs/Web/CSS/Specificity

I’ve changed it like 15 minutes ago and without “!important”, I’ve had this for like an hour earlier today (!important and without the “html” selector) and it didn’t work then. Do you guys think this could be the W3 Total Cache’s issue? I’ve haven’t had problems with it before and the plugin is recommended everywhere.

It could be w3 total cache’s issue or web hosting’s cache. Try to disable w3 total cache and clear the cache. If the issue still exists then maybe it’s web hosting’s cache.