Hi All,
I am currently using the Impulse theme. How can I change the color of “Sale” to red on the navigation bar and ensure it works with both the English and Chinese translations of my page?
Thank you !
Best regards,
Pammy
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.
1 Like
can you please share the store url so that i can give you an exact code and instructions.
thanks
Please add below JS code into your theme .liquid file before the
Online Store > Edit Code > Theme Files > Layout folder > theme.liquid file
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
[data-link="/collections/all-sale/Red"] {
color: red;
}
[data-link="/zh/collections/all-sale/Red"] {
color: red;
}
Hi,
Thanks for your solution. but it didn’t work 
In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottom of the file:
.site-nav__item [data-link="/collections/all-sale/Red"] {
color: red;
}
I can’t find the base.css file. Can I paste the code in theme.css.liquid instead?
I can’t find the base.css file. Can I paste the code in theme.css.liquid instead?
1 Like
yes plz
Hi Please add theme.liquid below line
#site-nav-item–6{ color:red }
@howlyhk is that fixed or not? if not i can fix that for you 
Please click on Customise button and follow the steps
- Click on header
- go to custom css and past that code.
- #site-nav-item–6{ color:red }
It will work
.site-nav__item [data-link="/collections/all-sale/Red"] {
color: red !important;
}
Please add the one i shared above.
Add this line
.site-nav li details#site-nav-item–6 summary { color:red !important; }
can you share collaborator access with me i would love to do that for you.
