Solved

Change color of one item from menu

azsport
Excursionist
17 0 4

Hello, 

i.m using the Impulse theme. I want to change my “final sale” menu item to red color. Can someone help me? Thank you

My website: https://azsport.ro

Accepted Solution (1)
Kyle_W
Shopify Expert
172 26 105

This is an accepted solution.

Hi @azsport

I'd suggest using the following ruleset since it uses an attribute selector for the link's URL:

 

.site-nav__link[href="/collections/final-sale"] {
  color: red;
}

 

This will ensure that the link color is red regardless of the menu item order.

 

As mentioned, you can place custom rulesets at the bottom of your theme's stylesheet, which can be found in the Shopify admin under Online StoreThemes > Actions > Edit code > Assets > theme.css

 

Hope this helps!

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)

View solution in original post

Replies 10 (10)

Developer-G
Shopify Partner
3032 593 846

Hello @azsport ,

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.css-> paste bellow code in bottom of file

.header-item.header-item--split-right li:nth-child(3) a {
    color: #ff0000;
}

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
azsport
Excursionist
17 0 4
Thank you, are you sure that is “child(3)” ?
Developer-G
Shopify Partner
3032 593 846

You can check source code to confirm.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Kyle_W
Shopify Expert
172 26 105

This is an accepted solution.

Hi @azsport

I'd suggest using the following ruleset since it uses an attribute selector for the link's URL:

 

.site-nav__link[href="/collections/final-sale"] {
  color: red;
}

 

This will ensure that the link color is red regardless of the menu item order.

 

As mentioned, you can place custom rulesets at the bottom of your theme's stylesheet, which can be found in the Shopify admin under Online StoreThemes > Actions > Edit code > Assets > theme.css

 

Hope this helps!

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)
azsport
Excursionist
17 0 4

Thank you so much! It works on web perfectly!

Do you know if for mobile i have to write something different ? If you know ,tks! 🙂

azsport
Excursionist
17 0 4

I actually found a solution for that as well 🙂 

Kyle_W
Shopify Expert
172 26 105

You're most welcome, @azsport! I'm glad to hear you got it working on desktop and mobile -- nice job!

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)
Alia_Makarem
Shopify Partner
63 0 18

Hello Kyle,

 

I tried your code and it worked great on desktop, but it doesn't seem to apply on mobile. is there a way to apply it there as well?

 

Thanks,

Alia

Alia_Makarem
Shopify Partner
63 0 18

Was able to figure out, this is my code now:

 

.site-nav__link[href="/collections/outlet"] {
color: #D70008!important;
}
.mobile-nav__link[href="/collections/outlet"] {
color: #D70008!important;
}

 

Not sure if this is the right way to do it though

 

LEDMaster
Visitor
1 0 0

I'm having similar issue with Prestige theme. Trying to change color of just "Sale" menu item to Red, but can't get it to work with similar code.  I have the following:

 

Website:  https://www.vonn.com

 

.Heading[href="/collections/all-products?special_offers=Sale,Clearance"] {
color: red;
}