Drop Down menu change color for single menu item

Solved

Drop Down menu change color for single menu item

Karlis
Excursionist
28 0 6

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

 

Accepted Solution (1)
ZestardTech
Shopify Partner
5639 1031 1359

This is an accepted solution.

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 11 (11)

ZestardTech
Shopify Partner
5639 1031 1359

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Karlis
Excursionist
28 0 6

Hi,

 

The url of the store

Thank you!

ZestardTech
Shopify Partner
5639 1031 1359

This is an accepted solution.

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Karlis
Excursionist
28 0 6

Thank you! 

ZestardTech
Shopify Partner
5639 1031 1359

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Karlis
Excursionist
28 0 6

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

 

lorethespore
Visitor
1 0 0

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

sahilsharma9515
Shopify Partner
1079 132 203

Hi @Karlis 

 

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

 

Best Regards,

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


DavidEKim
Shopify Partner
392 131 193

@Karlis 

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 }}

 

 

4. Replace the code with this code.

 

{{ childlink.title | replace:'Sale','<span style="color:red;">Sale</span>' }}

 

 

5. Save the file.

It should be in red now.

 

Before

20231025_203718.jpg

 

After

20231025_203621.jpg

 

Actual look

20231025_203959.jpg

 

 

I hope it helps.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
Karlis
Excursionist
28 0 6

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

 

Made4uo-Ribe
Shopify Partner
6991 1665 2057

Hi @Karlis 

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.