How can I change the color of 'Sale' on my main menu to red?

Store Design
1

Hey there

I know this has been asked before - but the solutions didnt work so may be out of date.

I want to make the word “Sale” on my main menu (web and mobile) red.

I just cant make it work with the solutions I found online

2

To make a “Sale” menu on the main menu in the Debut Shopify theme in red color, you can do the following:

  1. Go to your Shopify admin and navigate to the “Online Store” section.
  2. Click on “Themes” and then select “Customize theme” for the Debut theme.
  3. In the theme editor, navigate to the “Header” section.
  4. Click on the “Main menu” and scroll down to the “Links” section.
  5. Click on the “Add menu item” button to add a new menu item.
  6. In the “Link title” field, type “Sale” and then click on the “Save” button.
  7. To change the color of “Sale” menu, you can add a custom CSS.
  8. Go to “Actions” and select “Edit Code”
  9. Go to “Assets” folder and open “theme.scss.liquid”
  10. Add following code at the end of the file
#MainNav > li.sale a { color: red; }
  1. Save the changes.

This should add a “Sale” menu item to the main menu in red color.

3

Hi @Cornercopia ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

.site-nav > li:first-child .site-nav__label,
.mobile-nav > li:first-child .mobile-nav__label {
    color: red;
}

I hope it would help you

4

Thanks so much for this.

Sadly it didnt work (although I was only checking website - so maybe it did on mobile)

5

Thanks so much - this worked perfectly!

6

Ah - so when I then change the order of the main menu, a different word becomes red - are there any tweaks to the code I can make to make it “word” specific?

Thanks!!!