Change the color of one single navigation item.

Store Design
1

Hello, I want to change the color of one single navigation item (for example red for “OUTLET”).

Right now, I use the following workaround :

a[href="/pages/expertise-costume-et-experience-ceremonie"] {
      color: #2B9EB3 !important;
    }

It only kinda works. Yes, the navigation item is now the right color/weight. But it works too much : any button linking to that item will be colored too, which is not ideal.

Worse, if there’s a hero picture on the homepage linking to that item, the image is replaced by a solid block of color.

Please help.

2

@LothaireBordeau

Please share your store URL & a screenshot of what do you want!

Thanks!

3

Hello @dmwwebartisan !

Here’s the link to my website : https://www.lothaire.fr/

As you can see in the following screen cap, “SOLDES” is in black, on yellow background. It’s good. Except that anything, any button or here that links to that item/page will also be yellow. The hero you see in the screenshot, if I make it clickable, turns into a solid yellow block.

Capture d’écran 2022-01-31 à 12.00.24.png
Capture d’écran 2022-01-31 à 12.00.24.png1491×865 417 KB

4

@LothaireBordeau

Please add the following css assets/theme.css bottom of the file.

a[href="/pages/expertise-costume-et-experience-ceremonie"] {
    color: #000!important;
    font-weight: 900;
    background-color: #e7ff1b;
}

Thanks!

5

@dmwwebartisan As far as I understand, that won’t work, as I’ve explained in my post.

Here’s the code on my website :

a[href="/collections/soldes-hiver"] {
      color:black !important;
      font-weight: 900;
      background-color:#E7FF1B;
    }

When I used the code with #E7FF1B color as the text color, then yes, the navigation had the right color.

BUT everything that also linked to that page turned yellow : heros, or button text. Do I make myself a little clearer ? Hopfully. :slightly_smiling_face:

6

@LothaireBordeau

try this code

a[href="/collections/soldes-hiver"] {
      color:#E7FF1B  !important;
      font-weight: 900;
      background-color:#E7FF1B;
    }
7

@dmwwebartisan I’m afraid I haven’t made myself clear. I know how to turn one item the color of my choice.

But, when I do, using the code you provided or the one I already use (they’re the same), it has unwanted effects :

If I make the frontpage Hero picture clickable and link to that same collection, the image is replaced by a block of color.