Changing one menu item (SALE) to red color

Store Design

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.
61

Hi @brumisrl ,

I saw special price in your mega menu ?

62

@Kevin_Gomez ,

.index .scrollheader #logo a, .index .scrollheader .nav-container .shifter-handle, .index .scrollheader .nav-container ul#cart li a, .index .scrollheader .nav-container ul#cart li select.currency-picker, .index .scrollheader ul#main-nav li:nth-child(1) a {
    color: red !important;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->stylesheet.scss.liquid

63

Hi,

I have been through all the comments and have been unsuccessful. I am trying to highlight the word special offers to red on my website, and make it bold.

I am using the warehouse theme.

Can anyone help with this?

Thanks in advance.

64

Hi @ DeeJay,

Can you provide your website url so I can inspect?

65

Hello @DeeJay1 ,
Welcome to the Shopify community!
Share your store url with password.

66

Hi,

My website is www.aliveplanet.com.au

I want to change the text color of Sale - a menu item to RED color. I’ve tried a few suggestions and added the code in this discussion but they didn’t work. I use a custom theme

Can someone please help? Thanks a lot.

67

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

68

I have been trying to find my Theme.scss.liquid file but I only have a Theme.Liquid file that I have access to. I am also wanting to change the colour of a sale collection in my header to grab attention.

69

Is someone able to help me with this as well? I tried some different codes, but won’t turn to red.

Thanks in advance!

1 Like
70

@amaile which menu item do you want to make red?