Change the color of a single navigation menu

[Jlo1414]

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 :

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

Jean-Louis

[JHKCreate · 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! 

[Jlo1414]

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  ? 

[JHKCreate]

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

[Jlo1414]

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  !🙂

[JHKCreate · 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! 

[Jlo1414]

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

[gracielees]

Can someone help me do this in debut theme?

[passaf02]

gggh

[boldshapes]

Hey JHK Create,

I am using Debut Theme on my store boldshapes.co

I would like to change color of "Outlet" only in my header menu to red color or to #FF3333 if possible 

How can i make it?

 

[Lucinne]

Hello, I'm looking for the same as Jean-Louis on my Impulse theme.

I would like to add a "private sales" section to my menu in red also.

Is it the same on this theme?

I have to copy the piece of code to integrate it at the end of my theme?

https://www.endro-cosmetiques.com/

[JHKCreate]

Hi @Lucinne 

Can you add the menu item so we can provide the code? It's not 100% the same.

Thanks!+

[Zworthkey]

@Lucinne 
can you give mark which menu color you want to change?
Thank You.

[Lucinne]

Thanks a lot for your help ! 🙂 I added the "Private Sales" tab to my menu

[Zworthkey]

@Lucinne 
Which color do you want to put?

[Lucinne]

The color mark is : #803959

[Zworthkey]

@Lucinne 
Paste the code on top of the theme.scss file.

li.site-nav__item.site-nav__expanded-item:first-child a {
    color: #803959 !important;
}

Thank You.

[Lucinne]

Thank you for your message. 

I paste the code at the beginning of my thme in theme.liquid as on my capture but it does not work.  

[Zworthkey]

@Lucinne 
Not in theme. liquid.
Paste this code on top of the theme.scss file.
Thank You.

[Lucinne]

I'm sorry maybe it's me, but I can't find it. I searched in layout, assets, templates, sections ...
Do I have to create it somewhere?