Change the color of a single navigation menu - Theme Prestige

Store Design
1

Hello to all the Shopify community :-),

I need help for CSS coding on Pacific Theme → I would like to change the text color of only one of my main navigation menu to highlight it.

The Last “SALES” navigation menu should appear in red rather than grey and also in the sidebar menu.
I tried to quibble with the code but nothing to do, the color does not change. I’m having trouble identifying my menu or placing my code incorrectly on my CSS stylesheet.

2

you can place this at bottom of theme.scss file :

#section-header > div > div:nth-child(1) > nav > ul > li:nth-child(6) {
    color: red;
}

But if in future your menu changes you will have to change the (6) to another number to re-select it to work.

3

@gaiashome

Please add the following code at the bottom of your assets/theme.scss.liquid file.

nav.Header__MainNav li:nth-child(6) {
    color: red;
    text-transform: uppercase;
}

Hope this helps.

Thanks!

4

Thanks for your reply.It work, but my main menu have different color when I scroll down. Can it also change to red color when I scroll down?

1.png
1.png3840×1933 485 KB

WeChat Screenshot_20210319152031.png
WeChat Screenshot_20210319152031.png3840×1806 440 KB

And for the side bar on the left do you have a solution to change the text color of this menu too ?

5

I have a same issue about this code, let check my another reply

6

@gaiashome

Please add the following code for change the navigation text color when scrolling down.

nav.Header__MainNav li:nth-child(6) a.Heading {
    color: red;
}

Thanks!

7

Still no work, and how about mobile sidebar

8

@gaiashome

Let me check.

9

@gaiashome

Please remove the code I have given remove all code and add this new code for desktop and mobile.

/* for mobile */
nav.SidebarMenu__Nav a[href="/products/bed-linen-signature-soft-cotton-pearl-white-reject"] {
    color: red;
    text-transform: uppercase;
    font-weight: bold;
}

/* for desktop */
nav.Header__MainNav a[href="/products/bed-linen-signature-soft-cotton-pearl-white-reject"] {
color: red;
    text-transform: uppercase;
    font-weight: bold;
}

Thanks!

10

Thanks ! it prefect work already. Really appreciate that your help.

11

Hi,

I also have the prestige theme. But I don’t understand, it doesn’t work when I paste the code at the bottom of the theme.css file. Do you think you can help me please?

Thank you