How can I change the color of a single menu item in Impulse theme?

Store Design
1

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

2

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

3

Thank you, are you sure that is “child(3)” ?

4

You can check source code to confirm.

5

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 Store > Themes > Actions > Edit code > Assets > theme.css

Hope this helps!

6

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! :slightly_smiling_face:

7

I actually found a solution for that as well :slightly_smiling_face:

8

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

9

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

10

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

11

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

12

I want to do the same in SENSE theme but the

.site-nav__link[href=“/collections/special-offers”] {
color: color: #D70008!important;
}

did not work for me. I don’t know if i’m doing it worng or it’s some other issue?

Thank you