FROM CACHE - en_header

Change the color of a single navigation menu

Solved
Jlo1414
Tourist
7 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

Accepted Solutions (2)

Accepted Solutions
JHKCreate
Shopify Partner
3467 624 879

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

Learn more about us: jhkcreate.com

View solution in original post

JHKCreate
Shopify Partner
3467 624 879

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

Learn more about us: jhkcreate.com

View solution in original post

Replies 24 (24)
JHKCreate
Shopify Partner
3467 624 879

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

Learn more about us: jhkcreate.com
Jlo1414
Tourist
7 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  ? 

JHKCreate
Shopify Partner
3467 624 879

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

Learn more about us: jhkcreate.com
Jlo1414
Tourist
7 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  !🙂

JHKCreate
Shopify Partner
3467 624 879

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

Learn more about us: jhkcreate.com
Jlo1414
Tourist
7 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

gracielees
New Member
1 0 0

Can someone help me do this in debut theme?

passaf02
Tourist
4 0 3

gggh

 

boldshapes
New Member
6 0 0

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?

Capture d’écran 2021-07-28 100800.png

Lucinne
Tourist
9 0 0

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/

menu endro.PNGtheme impulse.PNG

JHKCreate
Shopify Partner
3467 624 879

Hi @Lucinne 

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

Thanks!+

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Zworthkey
Shopify Partner
5581 642 1507

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

Lucinne
Tourist
9 0 0

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

menu endro 22.PNG

Zworthkey
Shopify Partner
5581 642 1507

@Lucinne 
Which color do you want to put?

Lucinne
Tourist
9 0 0

The color mark is : #803959

Zworthkey
Shopify Partner
5581 642 1507

@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
Tourist
9 0 0

Lucinne_0-1632141680911.png

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
Shopify Partner
5581 642 1507

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

Lucinne
Tourist
9 0 0

Lucinne_0-1632142261586.png

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?