Re: Drop Down menu change color for single menu item

Solved

Drop Down menu change color for single menu item

Karlis
Excursionist
30 0 7

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
6148 1100 1477

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
6148 1100 1477

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
30 0 7

Hi,

 

The url of the store

Thank you!

ZestardTech
Shopify Partner
6148 1100 1477

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
30 0 7

Thank you! 

ZestardTech
Shopify Partner
6148 1100 1477

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
30 0 7

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
1280 165 249

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
393 131 202

@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
30 0 7

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
10211 2427 3079

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.