Change Typography Color for a Specific Menu Item

This is a Developer Level doc.

If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

If you want a specific menu item to have a different typography (link) color than the rest of the items, use the following CSS snippet:

/* Menu Item-Name Color */
#site-header #menu-item-XXX a.menu-link {
color: #000;
}

Adjust the color value per your need, as well as the XXX which in this case represents the specific menu item ID. Use the browser inspector to find the correct ID for the menu item you wish to apply changes to.

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.

Useful Link: How to Get a CSS Selector

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.