Changing one menu item (SALE) to red color

Topic summary

Goal: change a single menu item (e.g., SALE) to red, optionally both in the main header and in dropdowns; also questions on coloring sub-menu items.

Core approach: add custom CSS targeting the specific link or menu position, appended at the bottom of the theme stylesheet (Online Store → Theme → Edit code → Assets → theme.scss.liquid / theme.css.liquid / theme-styles.scss.css.liquid, depending on theme).

Key solutions:

  • Target by URL/handle: .Header__MainNav a[href=“/collections/sale” or “/collections/sale-items”] { color: red; } for precision.
  • Target by ID (if present): #navigation-sale { color: red; }.
  • Affect all items (example): #AccessibleNav li a { color: red; }.
  • Target by position (theme-specific): .site-nav li:nth-child(N) a { color: red; } and similar selectors for desktop/mobile variants (#SiteNav, #MobileNav), sometimes with !important. Other theme-specific selectors were provided for Debut, Prestige-based custom, and headers with “scrollheader” or “tt-desctop-menu”.

Outcomes: several users confirmed desktop success; mobile needed separate selectors. Users also asked where to place CSS; guidance was provided.

Status: ongoing. New requests (e.g., Warehouse theme “special offers”, lejean.com) remained unresolved in the thread.

Summarized with AI on December 11. AI used: gpt-5.

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

@givemecocos ,

Add below css

.price--on-sale .price__sale {
	color: red;
}

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!

Best regards,

Omar

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

@rolandopax ,

Can you please share your site url

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…

@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

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

@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!!!

@oscprofessional

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

www.yanhomeandliving.com/

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

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

Thank you it worked @oscprofessional

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

Thank you again

Hi @OakWoodWine ,

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

Search for tag (Use Ctrl + F)

3-6 lines below the tag you’ll see the Alphabet “A”, just remove it and save the file.

1 Like

@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!!!

Hi @bonbonverona ,

I can’t see the “HALLOWEEN” on your menu? Can you please confirm?

Hello, thanks for your reply!

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

thank you again

@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!

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

1 Like

@bonbonverona ,

Add this code instead of the previous one,

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