Change the color of a single navigation menu

Solved
Highlighted
Tourist
6 1 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 first "SMALL PRICES" 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.

- Here is a link to my webshop: https://www.bel-arte.be 
- Here is also a screenshot of my homepage below :

Capture d’écran 2020-09-07 à 18.47.07.png

In advance a big thank you to whoever can help me on this

Jean-Louis

0 Likes
Highlighted
Shopify Partner
1079 171 198

This is an accepted solution.

Hi Jean-Louis!

This should solve it for you swiftly:

 

#shopify-section-header > div:nth-child(2) > div.main-header-wrapper > header > nav > ul > li.navmenu-item.navmenu-id-small-prices > a {
    color: red;
}

#shopify-section-header > div:nth-child(2) > div.main-header-wrapper > div > div.site-mobile-nav.open > nav > ul > li.navmenu-item.navmenu-id-small-prices > a {
    color: red;
}

 


Add it at the bottom of your theme.scss.css file please and let me know! 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
Highlighted
Tourist
6 1 1

Your code works for the Main Menu thank you !

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

0 Likes
Highlighted
Shopify Partner
1079 171 198

Yes I've edited the code a few minutes after posting, add both codes above for desktop and mobile! 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
Highlighted
Tourist
6 1 1

And have you a solution to change the color of the same menu in the left side bar too ?

Thank again for your great help  !

0 Likes
Highlighted
Shopify Partner
1079 171 198

This is an accepted solution.

Oh sorry I thought you meant the mobile menu!

Here's the one for the sidebar:

body > div.main-content-wrapper > div.sidebar > div > ul > li:nth-child(1) > a {
    color: red;
}


Let me know! 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
Highlighted
Tourist
6 1 1

It works perfectly too :-). Many thanks to you JHKC for you very quick reply and your great help with your codes.

Have a nice day & take care !

Jean-Louis
Bel'Arte store

0 Likes
Highlighted
New Member
1 0 0

Can someone help me do this in debut theme?

0 Likes