Drop Down menu change color for single menu item

Store Design
,

Topic summary

A user wants to change the color of a specific menu item (“Sale” collection) to red in the Dawn theme.

Initial Solutions Attempted:

  • Modifying the header-dropdown-menu.liquid file by replacing {{ childlink.title | escape }} with code targeting “Sale” text - this approach failed for the user.

Working Solution:
Adding custom CSS to the base.css file:

.list-unstyled a[href="/collections/sale"] {
  color: red !important;
}

This successfully changed the menu item color to red.

Ongoing Issue:
The solution doesn’t work across translated versions of the store. The red color applies to the English “On Sale” menu item but not to translated equivalents (e.g., “Izpārdošana” in Latvian). The original poster is seeking advice on how to extend the color change to all language versions.

Additional Note:
Another user reports the CSS solution isn’t working for them despite trying multiple approaches on the Dawn theme, suggesting potential theme version differences or implementation issues.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m using Dawn theme and would like for Sale collection in the menu to be in red, how can I go about do it? I’ve added screenshot below to specify which link I’m referring to.

Karlis_0-1698227070795.png
Karlis_0-1698227070795.png221×271 6.61 KB

2 Likes
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hi @Karlis_1

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,

Sahil

4

@Karlis_1

Hi,

Please follow the steps below to make the “Sale” menu item in red.

  1. Go to online store > … (next to customize) > Edit code

  2. In code editor, please go to Snippets > open “header-dropdown-menu.liquid” file

  3. Please find the code below in line 45 & line 53

{{ childlink.title | escape }}
  1. Replace the code with this code.
{{ childlink.title | replace:'Sale','Sale' }}
  1. Save the file.

It should be in red now.

Before

20231025_203718.jpg
20231025_203718.jpg1323×505 69.5 KB

After

20231025_203621.jpg
20231025_203621.jpg1202×505 78.8 KB

Actual look

20231025_203959.jpg
20231025_203959.jpg1572×645 172 KB

I hope it helps.

5

Hi,

Thank you. I tried but it didn’t work. Initially I thought that it is because I changed it to On Sale, both in menu and in code, but then I switched back to Sale in both places, but still didn’t work. Am I doing it correctly?

Karlis_0-1698244793470.png
Karlis_0-1698244793470.png941×169 12.7 KB

6

Hi @Karlis_1

Would you mind to share your Store URL website? with password if its unpublish. You can also PM us if you dont like to share your store URL. Thanks!

7

Hi,

The url of the store

Thank you!

1 Like
8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the Bottom of the file:
.list-unstyled a[href="/collections/sale-1"] {
color: red!important;
}
.list-unstyled a[href="/collections/sale"] {
color: red!important;
}

ZestardTech_0-1698309906980.png
ZestardTech_0-1698309906980.png1858×469 323 KB

1 Like
9

Thank you!

1 Like
10

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

11

Hi again,

I translated my shop, but for some reason the On Sale coloring is not transferring across languages? For example, Izpārdošana here is Latvian for On Sale that should be red. Maybe you have an advice for me? Thank you!

Karlis_0-1701897948871.png
Karlis_0-1701897948871.png509×367 17.5 KB

12

Hi,
I’m trying to use the code you provided directly in the base.ccs but it still doesn’t work. I also tried other solutions on the dawn theme but nothing. What could it be? Let me know if we can try to find a solution, thanks