How to alter the 'sale' tab font color on the main menu?

Store Design
1

Hi, how do i change the “sale” tab font colour on main menu to red?

url: elita.com.sg
password: clewth

elitaco_0-1630570012483.png
elitaco_0-1630570012483.png239×358 1.43 KB

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.navigation .navigation__container ul.navigation__links li:nth-child(2) a {
color: red;
}
.navigation .navigation__container ul.navigation__links li:nth-child(2) a:hover::after {
background-color: red;
}
3

hi there, it works but the “Contact us” also became red now

elitaco_0-1630570640151.png
elitaco_0-1630570640151.png224×344 1.49 KB

4

@elitaco

Please try this css

.navigation .navigation__container ul.navigation__links li:nth-child(2) a {
color: red;
}
.navigation .navigation__container ul.navigation__links li:nth-child(2) a:hover::after {
background-color: red;
}

.navigation .navigation__container ul.navigation__link--secondary li:nth-child(2) a {
color: #000;
}
.navigation .navigation__container ul.navigation__link--secondary li:nth-child(2) a:hover::after {
background-color: #000;
}
5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.navigation .navigation__container ul.navigation__links:first-child li:nth-child(2) a {
    color: red;
}
.navigation .navigation__container ul.navigation__links:first-child li:nth-child(2) a:hover::after {
    background-color: red;
}
6

@dmwwebartisan hi, it’s still the same

7

@ZestardTech

hi, the “contact us” is no longer in red but the “dresses” is in red.

elitaco_0-1630571943069.png
elitaco_0-1630571943069.png355×386 2.6 KB

8

@elitaco

Remove previous css add this css

.navigation .navigation__container ul.navigation__links li:nth-child(2) a {
color: red;
}
.navigation .navigation__container ul.navigation__links li:nth-child(2) a:hover::after {
background-color: red;
}

.navigation .navigation__container ul.navigation__link--secondary li:nth-child(2) a {
color: #000;
}
.navigation .navigation__container ul.navigation__link--secondary li:nth-child(2) a:hover::after {
background-color: #000;
}

.navigation .navigation__container ul.navigation__sublinks:first-child li:nth-child(2) a {
    color: #000;
}

.navigation .navigation__container ul.navigation__sublinks li:nth-child(2) a:hover::after {
background-color: #000;
}
9

@dmwwebartisan

The “dresses” tab is in different colour

elitaco_0-1630572438540.png
elitaco_0-1630572438540.png272×575 3.38 KB

10

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.navigation .navigation__container ul.navigation__links:first-child li:nth-child(2) a {
    color: red;
}
.navigation .navigation__container ul.navigation__links:first-child li:nth-child(2) a:hover::after {
    background-color: red;
}
.navigation .navigation__container ul.navigation__links:nth-child(2) li a {
    color: black;
}
11

@ZestardTech

elitaco_0-1630573277897.png
elitaco_0-1630573277897.png271×541 3.15 KB

12

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.navigation .navigation__container ul.navigation__links:first-child li ul.navigation__sublinks li.navigation__sublink a {
    color: black;
}
13

thanks!

14

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.