skip to Main Content

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?

2

Answers


  1. 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;
     }
    Login or Signup to reply.
  2. In Mobile view doesn’t have #menu-item-427 this id. so replace with .menu-item-427

    Try this css it’s works

    .menu-item-427 a {
        color: #2976ce;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search