Changing the 'SALE' Collection to Red

[Maxcramer13]

I would like to change our 'SALE' button on our menu to the colour red, I have tried multiple types of code found in other answers for the same question but I think it may change from theme to theme.

I'm using the Momentum theme, and it doesn't seem to have to correct .css files under assets when I go to edit the code. The website is statementnz.com , if that is any help.

Any suggestions would be appreciated!

[WalkYourStyle · Accepted solution]

There are 2 ways to do this:

First Way

1. Go to Online Store->Themes->Edit Code

2. Locate the file 'theme.min.css'

3. At the end of the file paste the below code

.first-level-dropdown:nth-child(5) a span {
   color: red;
}

This will work, but it's not very efficient because if you want to change its position, you'll always have to update the number inside the parentheses.

Second Way

The second way to achieve this is by finding the Liquid code for the menu and adding a separate class name to the 'SALE' menu item. This way, you can target it easily without using the `nth-child()` property.

[WalkYourStyle · Accepted solution]

There are 2 ways to do this:

First Way

1. Go to Online Store->Themes->Edit Code

2. Locate the file 'theme.min.css'

3. At the end of the file paste the below code

.first-level-dropdown:nth-child(5) a span {
   color: red;
}

This will work, but it's not very efficient because if you want to change its position, you'll always have to update the number inside the parentheses.

Second Way

The second way to achieve this is by finding the Liquid code for the menu and adding a separate class name to the 'SALE' menu item. This way, you can target it easily without using the `nth-child()` property.

[Maxcramer13]

This is wonderful, the first way works for desktop perfectly. Is there a way to make it work for mobile as well?

[WalkYourStyle · Accepted solution]

Yea of course. Add the below code at the end of the 'theme.min.css' file.

.mobile-nav__item.top-level:nth-child(5) a {
    color: red !important;
}

[WalkYourStyle]

Also if you want to add the hover effect in desktop add the below code again at the end of the 'theme.min.css' file

.first-level-dropdown:nth-child(5) a:hover span{
   color: #ff5c5c; /* Modify the color according to your preference */
}