[FIXED] Chang color of menu items wordpress

Issue

I would change the color of the menu items in wordpress. In this site https://www.modacapellishop.it/ I have four voices in the menu (Brand, Prodotti, Modacapelli Choice, Outlet) and I need to change the color of Modacapelli Choice (grey to blue). I added this code on the CSS file:

/* Change color menu Modacapelli Choice */
#menu-item-427 a {
color: #2976ce;
}

It work but just on desktop. On the mobile version in menu navigation sidebar the menu item "Modacapelli Choice" doesn't change the color.

How can I solve that?

Solution

Since this is an extremely specific case you can either .menu-item-427 > a { color: red!important; } or do .nav>li.menu-item-427>a { color: red; } I would recommend the latter.

However both are not great, since it is bound to the ID. I would recommend making an ACF field for the page or the menu-element, then checking if it exists, and creating an inline style or adding a class if it is true. The user can then also change the color of other elements he wishes to change without contacting you about it.

You would then add a class like this to your menu markup for example.

.is-highlighted-element {
    color: red;
 }

Answered By - Frizzant