Menu customization

[joshopkins]

Is it possible customize a specific top navigation menu item to a different color and hover state?

[jade]

Hi @mobeus,

Yes, it is but doing it would depend on the setup of the website you are working on.

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, if you are using Pro - go to your Pro Header and find the Inline Navigation element then add this code to the Inline Navigation’s Element CSS:

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

If you are using X, please add this code in X > Theme Options > CSS:

.x-navbar .x-nav li.highlight a {
      color: #000;
}

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

• CSS Colors - https://goo.gl/rM1ys1

Hope this helps.