Changing one menu item (SALE) to red color

Brashid91
Tourist
7 1 1

I've been trying to figure out how to change the text color of one link at the top of my menu bar. I've been searching old threads to no avail, as my theme is a custom prestige based theme.

 

www.dachicollections.com

 

I'm trying to edit a link at the top called " SALE" Into red text color, can anyone help?

Replies 67 (67)

Pratap_Odedra
Visitor
2 0 0

Add below code in the theme.liquid file. Also, you can set your background color and text color in below style.

<style>
#section-announcement {
background: #000 !important;
color: #f40505 !important;
}
</style>
Pratap Odedra
Odedra.pratap@gmail.com

Jason
Shopify Expert
11190 225 2282

Does the


@Brashid91 wrote:

I've been trying to figure out how to change the text color of one link at the top of my menu bar. I've been searching old threads to no avail, as my theme is a custom prestige based theme.

 

www.dachicollections.com

 

I'm trying to edit a link at the top called " SALE" Into red text color, can anyone help?


Does the above answer your question? I'm reading this as you wanting to change a single word but the above is about change the background colour of the announcement bar. If you are talking about a specific/word link can you give some details about where that is? You have a simple menu at the moment but I don't see a specific "sale" link.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Brashid91
Tourist
7 1 1

Jason, yes that is what I'm trying to do, I'm actually trying to determine whether to create a SALE button on the main header or under the Store menu dropdown. I'd like to have the option to turn either of them red. For the time being, i've added a button to the top menu. 

 

I'd also like to be able to know how to change the colors for the sub menu items under store, like jewelry, bath towels etc. 

Jason
Shopify Expert
11190 225 2282

I don't see the sale button but let's just use any item in your menu. If you are ok with editing some CSS in your take a look at the code below:

/* change rug-medium menu item to red */
.Header__MainNav a[href="/collections/rugs/medium"] { color: red; }

It should be easy enough to follow. It's going to target any link in your main header navigation, with a url of "/collections/rugs/medium", and turn it red.

If your sale collection is "/collections/sale" you'd change the code to:

/* change a sale collection link to red */
.Header__MainNav a[href="/collections/sale"] { color: red; }

See how you go with that and post back if you get stuck.

 

Edit. I can see you have a link there now for "/collections/sale-items". Just use the same idea as above for that handle.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Brashid91
Tourist
7 1 1

Great! May I ask where I would be appending this code to? I've tried adding it at the bottom of the theme.liquid code but to no avail.

Ninthony
Shopify Partner
2329 350 1023

It's CSS code, you need to put it at the bottom of your theme.scss.liquid file. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
migolondrina
Visitor
2 0 7

This worked for me, but how do I have it show up on the mobile drawer? Thank you! 

Ranga
Visitor
1 0 3

The CSS class for Minimal theme seems to be in .site-header. Here is the tweaked code snippet.

 

As Jason has mentioned place it bottom of theme.scss.liquid layout file

 /* change a sale collection link to red */ 
.site-header a[href="/collections/sale"]
{ color: red; }
velvetsofa
Visitor
1 0 0

Hi Ranga,

 

I also would like to change text color of one specific menu item. Menu item and collections is called "sample sale".

 

I have implemented the code and changed the collection name but it does not work. Also put the code bottom of theme.scss.

 

Could you please help me out?

 

Thanks!

 

 

Schermafbeelding 2020-04-05 om 16.43.48.png

 

Best regards,

Omar

houseofjay
Tourist
12 0 0

Hi Jason, we are using Grid theme and we wanted to bold the SALE in our main menu, may i know the code on this? Thank you

oscprofessional
Shopify Partner
15830 2369 3071

Hello ,

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

#navigation-sale {
	font-weight: 700;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
houseofjay
Tourist
12 0 0

Thank you so much. How about if i want to change the color?

oscprofessional
Shopify Partner
15830 2369 3071
#navigation-sale {
	color: red;
}

Note: Change color as per your requirement


@houseofjay wrote:

Thank you so much. How about if i want to change the color?


If my solution helpful to you then please like and accept it

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
houseofjay
Tourist
12 0 0

Thank you so much.. 

leenaandlu
Excursionist
24 0 3

Hi! I'm trying to change the color for a menu item, I did try to paste the code but it didn't work. I'm using a Brooklyn theme. I appreciate your help!

oscprofessional
Shopify Partner
15830 2369 3071

@leenaandlu,

Add below css to theme.scss

This css will change the color of all menu item

#AccessibleNav li a {
	color: red;
}

Note:Please change the color as per your requirement

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
rolandopax
Visitor
1 0 0

this completely messed up our website!!! how do we go back now? i've deleted this line of code but it won't change back to normal, images are  all over the place, some text red some is gone completeley!!

oscprofessional
Shopify Partner
15830 2369 3071

@rolandopax,

Can you please share your site url

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
houseofjay
Tourist
12 0 0

Our website www.houseofjay.com

givemecocos
New Member
5 0 0

Hi,

 

I am trying to change the word SALE to red. I did the compare price, so I compared the price I had before to the sale one. However is in grey colour and I would like it in red,

 

www.givemecocos.com

 

someone can help me? 

thank you

 


@houseofjay wrote:

Our website www.houseofjay.com


Adela 

oscprofessional
Shopify Partner
15830 2369 3071

Hello @givemecocos,

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

.price__sale .price-item__label {
	color: red;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
givemecocos
New Member
5 0 0

Hi,

 

thank you! it works, now the word SALE is in red, however the price on sale still black. There is any way I can put that in red as well?  

thank you

oscprofessional
Shopify Partner
15830 2369 3071

@givemecocos,

Add below css

.price--on-sale .price__sale {
	color: red;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
jckacova
Excursionist
29 0 5

Hi there,

I paste

 /* change a sale collection link to red */
.Header__MainNav a[href="/collections/sale"] {
color: red;
}

 

It didn't work for me. The color of SALE on menu bar of home page is still black...

 

 

nan_li1
Visitor
3 0 0

@oscprofessional 

Hi, can you please tell me how can I change the "SWIMWEAR" on menu to red color on my site www.tapshe.com?  I use Ella theme bought on themeforest Thank you so much.

 

Yi

oscprofessional
Shopify Partner
15830 2369 3071

Hello nan_li1,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme-styles.scss.css.liquid

.site-nav li:nth-child(6) a {
    color: red;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
bonbonverona
Tourist
13 0 1

@oscprofessional 

Hi, can you please tell me how can I change the "HALLOWEEN" on menu to orange color on my site www.bonbonverona.it?  I use Debut theme! Thank you so much!!!

crp1u7
Visitor
2 0 0

@oscprofessional 

my theme is "debut", can you advise how to change "sale" to red color. My store link is :

www.yanhomeandliving.com/

OakWoodWine
Tourist
12 0 3

Hello, @oscprofessional 

 

I have mine in "supply" and need to  change the "SHOP" in main menu to red. Can you please tell me how?

 

Also I think I broke the code before and I have an "A" in my promo banner at top, do you know how to remove?

 

my site obarrel.com


Thank you!!

oscprofessional
Shopify Partner
15830 2369 3071

Hello OakWoodWine,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.site-nav>li:nth-child(2) a {
    color: red;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
OakWoodWine
Tourist
12 0 3

Thank you it worked @oscprofessional 

 

Do you know how to remove that "A" I have at the top left of the screen?

 

obarrel.com

 

Thank you again

UmairA
Shopify Partner
1106 101 225

Hi @OakWoodWine ,

Go to Edit theme code > Layouts > theme.liquid file.

Search for <body> tag (Use Ctrl + F)

3-6 lines below the <body> tag you'll see the Alphabet "A", just remove it and save the file.

 

OakWoodWine
Tourist
12 0 3

Do you know how I can make "SALE" red for mobile phones too?

 

obarrel.com

oscprofessional
Shopify Partner
15830 2369 3071

Hello OakWoodWine,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.mobile-nav>li:nth-child(2) a {
    color: red;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
OakWoodWine
Tourist
12 0 3
Thank you!!
bonbonverona
Tourist
13 0 1

 

@oscprofessional 

Hi, can you please tell me how can I change the "HALLOWEEN" on menu to orange color on my site www.bonbonverona.it?  I use Debut theme! Thank you so much!!!

UmairA
Shopify Partner
1106 101 225

Hi @bonbonverona ,

I can't see the "HALLOWEEN"  on your menu? Can you please confirm?

bonbonverona
Tourist
13 0 1

Hello, thanks for your reply!

HALLOWEEN it's the second after BRAND, I attach you the screenshot! 

thank you again

 

Schermata 2020-10-08 alle 07.46.19.png

UmairA
Shopify Partner
1106 101 225

@bonbonverona ,

The link you share in the first post is going to some other store. Anyways, Here is the solution

#SiteNav li:nth-child(2) a {
color: orange !important;
}

Add the above code to your theme.scss.liquid file.

Best of luck with your startup!

bonbonverona
Tourist
13 0 1

thank you so much sorry for the wrong link, it worked in the desktop version but not mobile, how can I do?

the correct one is www.bonbonverona.it

thanks so so much

UmairA
Shopify Partner
1106 101 225

@bonbonverona ,

Add this code instead of the previous one,

#MobileNav li:nth-child(2) a, #SiteNav li:nth-child(2) a {
color: orange !important;
}
bonbonverona
Tourist
13 0 1

@UmairA 

Thank you so much for youtìr help!!! i just saw that became orange also other parts of the sub menu ( i attach you a screenshot!)

What should i add in the code to have orange only HALLOWEEN in the main menu?

thanks again

Schermata 2020-10-13 alle 14.59.07.png

bonbonverona
Tourist
13 0 1

@UmairA  sorry to bother you and

Thank you so much for youtìr help!!! i just saw that became orange also other parts of the sub menu ( i attach you a screenshot!)

What should i add in the code to have orange only HALLOWEEN in the main menu?

thanks again

 

Schermata 2020-10-13 alle 14.59.07.png

bonbonverona
Tourist
13 0 1

@oscprofessional 

hello,can you help me?

I added this: 

#MobileNav li:nth-child(2) a, #SiteNav li:nth-child(2) a { color: orange !important; font-weight: bold; }

But it changes also other items in the submenus.

How can i modifiy just to apply changes to "HALLOWEEN" in the main menu?

thanks a lot

Schermata 2020-10-13 alle 14.59.07.png

brumisrl
New Member
4 0 0

Hello, I need to do the same in my mega menu of the Trademark theme. I want "special offers" text in red.

https://www.gioielleriagagliardi.com/

Also on mobile.

 

Can you help me, please?

oscprofessional
Shopify Partner
15830 2369 3071

Hi @brumisrl ,

I saw special price in your mega menu ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Open_A
Visitor
2 0 0

Hi, I know I am quite late to this thread. The coding worked perfect on laptop, how do I get my mobile header to also be in red for the sale collection?

 

www.openattireuk.co.uk 

 

Kind regards,
Elliot

BestEverDigital
Shopify Partner
11 0 2

Hi @Brashid91,

 

Please add this code to the very bottom of your theme.scss file:

 

.price__sale .price-item__label {
    color: red;
}

Thanks,

Brad @ BestEver Digital

www.besteverdigital.co.uk

Kevin_Gómez
Visitor
2 0 0

Hi!

Same here.. How can I change the ¡DESCUENTOS! section to red color? Mobile and web version.

www.lavetem.com

Appreciate your help!!