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.
Use the theme editor with Superstore to adjust the color of a menu item. For other themes, use our modification guide to adjust the theme's styling.
Use Superstore's sale link label feature
Superstore includes a theme editor field to identify the menu item to adjust, as well as a swatch selector for the desired color.
Add the name of the menu item to the Sale link label field. In the below example, buy superstore is added to the field to match the BUY SUPERSTORE menu item. This field is not case-sensitive but confirm the spelling matches to complete the connection.
Select the swatch beside Sale link to adjust the color used for this menu item, then Save.
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.