Change color of single main menu item

Store Design

Topic summary

Goal: change the color of a single main menu item in a Shopify Retina theme.

Key steps and proposals:

  • After the store URL was shared, contributors suggested using CSS (Cascading Style Sheets).
  • Initial approach: add a rule targeting the specific link (e.g., a[href=“/collections/final-sale”]) and place it in Assets > theme.css.
  • Alternative guidance asked whether to change all menu text, only the selected state, or a specific item; some instructions suggested adding code in theme.liquid (above ), but no effective code was shown in those posts.

Issue encountered:

  • The merchant added code but saw no change.

Working solution (final):

  • Add this CSS to Assets > theme.css:
    .main-nav__tier-1-item:nth-last-child(1) summary.main-nav__tier-1-link { color: red; }
  • This targets the last top-level menu item in the Retina theme and successfully changes its text color.

Notes:

  • Screenshots were shared for illustration but not essential to apply the fix.

Status: resolved (color change now works).

Summarized with AI on December 27. AI used: gpt-5.
9

Hello @ArdenTeal ,

I understand you are looking to change the color of the menu item of the navigation menu.

You can implement this change using CSS code

I have mentioned a code for changing the color of the ‘Sale’ menu item.

Add the code at the bottom of the theme.liquid file before tag and save.

[You can implement this code for highlighting any other menu item as well, however, you have to only replace the ‘href’ link to the respective menu item.]

Output will be like this -:

Anshul_arora_0-1718264070920.png
Anshul_arora_0-1718264070920.png1592×768 243 KB

I hope the code helps you.

Please share if you have any queries.

Thank you.