Change color of one menu item

[ninja21]

Hi There

I’ve attempted to change one menu item using different css that I found on the forum but nothing seems to work.

I’ve created a CSS class free-gift after enabling it under screen options, added the css code .x-navbar .x-nav-wrap .x-nav > li.free-gift > a {
color:#008000 !important;
}

I’ve tried others as well but no love.

The website is https://dremilycolwell.com/

Thanks in advance

[jade]

Hello @ninja21,

You can add a class to the menu item then add an Element CSS to the Inline Navigation.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to your Pro Header and find the Inline Navigation element then add this code to the Inline Navigation’s Element CSS:

$el .free-gift a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: #000;
}

Please feel free to change the color value in the code above.