How to make my 'Sale' label red on the Supply theme?

[HipHackSales]

Hello,

 I was wondering if anyone could help me with coding as well as the steps to get my sale label to show up individually red?

In the custom section, there is only an option to change the colour of all the menu labels.

 I use the theme Supply theme for my website (which is currently not published to the public).

I have attached a photo of my website for reference. Thanks!

[Jasoliya]

Send your store url so i can check and give exact solution. 

[HipHackSales]

Hi Jasoliya, 

Thanks for your response! my url is https://hiphacksales.com/ the password to enter the site is "12345" 

[Jasoliya]

For that you have knowledge of liquid code, because we have to do this by some logic as you just ant to change color of "Sale" menu color and this menu generating by loop so its same for all, but follow this:

1. Snippet->site-nav.liquid-> find <li{% if link.active %} class="site-nav--active"{% endif %}> and add bellow condition in <a> next to this line.

You have to add class like this

class="site-nav--link{% if link.title contains 'SALE' %} red_clr{% endif %}"

2. Asset->theme.scss-> add bellow code in bottom of file.

.red_clr {color:red !important;}

[Griffincote]

For some reason it works on the website display on my computer but not on my mobile device.  

What would be the cause of that?  Is there a different code I need to add this feature on my mobile website display?

Please let me know.

Thanks

[Jasoliya]

Send me your store url

[Griffincote]

https://www.gascari.com

[Jasoliya]

For mobile menu its different code.

find same thing on Snippet->mobile-nav.liquid and implement it on this file. 

[Griffincote]

the same code doesn't seem to be working.

Where should I insert this code?  Is it the same code that is already attached in this thread?

[Griffincote]

Just figured it out.

Thanks for your help 

[ilindsey]

I am trying to do the same thing. I want the word 'Clearance' to be #a3140b, but I am not sure how to do it.

Here the link to the site.

[Jasoliya]

Hi @ilindsey 

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

.site-navigation li:last-child a {    color: #a3140b;  }

[salmansillc]

I want my On sale button to be placed after Home, So where should I paste the link? and also I want to display it on mobile as well. My store link is: https://oliverandsmith.com/

[Jasoliya]

For that you have to chnage menu postion from "admin/online store/ navigation/ main menu/

then need to add new code and remove old code from css file you added 

add new one:

.header__link-list li:nth-child(2) a { color: red; }

This code for mobile view:

.panel__scroller ul li:nth-child(2) a { color: red; }

[salmansillc]

I need the same solution like the On sale button in red. Should I follow the same instructions? My store link is: https://oliverandsmith.com/

[Jasoliya]

Hi @salmansillc 

Follow this

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

.header__link-list li:last-child a { color: red; }

[salmansillc]

Thank you so much! But I want my On sale button to be placed after Home, So where should I paste the link?