Not all menu items are created equal. Merchants often use a separate, more noticeable font color for a particular menu item to draw focus to it. Use a distinct color to highlight menu items for special sales, important policies, and more.
Adjust the theme's stylesheet
Another way to adjust this menu item font color is by directly editing the theme's stylesheet (CSS file). To apply this adjustment, gather the URL, combine it with a CSS code, choose a color, then add the code to the very bottom of your theme.css.liquid file.
What steps should I take before modifying theme files?
Gather the URL
Each of your header menu items direct to a specific URL. This URL address can be used to target the associated item with special styling.
Go to your storefront, then click the desired menu item to open the linked URL.
Copy the URL for this page to use for the next step.
For example, to highlight the Contact menu item in the Empire Supply demo, this is the URL to gather:
https://empire-theme-supply.myshopify.com/pages/contact-us
Since the URL is internal (not leading to a separate address), shorten the URL like so:
/pages/contact-us
Combine with CSS code
Add this shortened URL to the below code between the quotation marks:
a[href^="/pages/contact-us"] {color: red !important;}
Choose a color
Change the value of red to another color name or hex code.
a[href^="/pages/contact-us"] {color: green !important;}
or
a[href^="/pages/contact-us"] {color: #33ff00 !important;}
Add the code to the stylesheet
Once you have the code assembled, add it to the bottom of the theme.css.liquid file.
Go to Actions > Edit code > Assets to open the theme file. Scroll to the very bottom of the stylesheet.
Save, then Preview theme or View theme to confirm the changes.
Not working?
If you are adjusting a menu item with a dropdown or mega navigation, use this code instead:
summary[data-href="/pages/contact-us"] {
color: blue !important;
}