Changing Just the word "Sale" in navigation header to be color red on Impulse theme

Topic summary

Goal: Change only the “Sale” item in the Impulse theme’s navigation to red, working for both English and Chinese versions.

What was tried:

  • Store URL shared; a suggestion to add JS before in theme.liquid was made, but the code snippet wasn’t actually provided.
  • CSS added via Edit code (and Customize > Header > Custom CSS):
    • Targeting [data-link=“/collections/all-sale/Red”] and the Chinese path /zh/collections/all-sale/Red.
    • Variants in base.css (not found) and theme.css.liquid instead.
    • Selectors tried: .site-nav__item [data-link=“/collections/all-sale/Red”] (with and without !important), #site-nav-item–6, and .site-nav li details#site-nav-item–6 summary { color:red !important; }.
  • Multiple screenshots show code was added but had no effect.

Notes/constraints:

  • base.css was not present in the theme; reliance on data-link attributes and specific IDs may not match Impulse’s actual DOM structure.
  • Bilingual URLs (English/zh) complicate URL-based selectors.
  • Images/screenshots are central to the attempts and failures.

Status: Unresolved. The poster cannot grant collaborator access and requests alternative, code-only guidance. Next step likely requires an accurate selector based on the theme’s real markup for the “Sale” menu item.

Summarized with AI on December 28. AI used: gpt-5.

@howlyhk

Please add below JS code into your theme .liquid file before the

Online Store > Edit Code > Theme Files > Layout folder > theme.liquid file