Change font colour of the collection SALE on header menu

[Trivin]

Want to change the colour of SALE on the header menu to RED.

I added the code for it in css.

nav.Header__MainNav.hidden-pocket.hidden-lap li.HorizontalList__Item a[href=“/collections/frames-of-festivity-sale”] {
color: red;

}

But this is not changing it. Please help.

[Moeed]

Hey @Trivin

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @Trivin

Could you share your store link to check?

[Trivin]

www.gemopticians.com

[Trivin]

nav.Header__MainNav.hidden-pocket.hidden-lap li.HorizontalList__Item a[href=“/collections/frames-of-festivity-sale”] {
color: red;

}

Previoulsy above code in theme.css file has worked.

[BSSCommerce-B2B]

HI @Trivin ,

It’s simple way, you can try:

If your code css is right, you need to add pattern: “!important” after attribute color: red to overwrite CSS customize because CSS must adhere to a certain order of precedence.

Like this:

nav.Header__MainNav.hidden-pocket.hidden-lap li.HorizontalList__Item a[href="/collections/frames-of-festivity-sale"] {
   color: red !important;
}

Or try add my code css in the end of file theme.css :

ul.HorizontalList.HorizontalList--spacingExtraLoose li:nth-child(1) a {
    color: red !important;
}

The result will be:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[Trivin]

I have tried just now, you can check but it doesn’t change to red

[BSSCommerce-B2B]

Hi bro @Trivin

I have just editted my solution in this previous reply, you can try this way once more time:

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

ul.HorizontalList.HorizontalList--spacingExtraLoose li:nth-child(1) a {
    color: red !important;
}

Step 3: Save and reload page

The result will be:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

[Trivin]

This has changed colour of the rest of the menu items also as you can see

[BSSCommerce-B2B]

Hi @Trivin ,

Sr about my little mistake.

You can try this code:

ul.HorizontalList.HorizontalList--spacingExtraLoose li:nth-child(1) .Heading.u-h6 {
    color: red !important;
}

THe result will be:

Thanks you for your patience!

I hope this instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[Dan-From-Ryviu]

Please use this code; maybe you added a static link to that sale in the menu.

a[href="https://www.gemopticians.com/collections/frames-of-festivity-sale"] { color: red !important; }

[Trivin]

Hello! This works for the desktop. Could you also help me set it up for mobile version?

As you can see in the mobile sidebar menu, it doesnt change to red.