Solved

Change the color of a single navigation menu

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)

JHKCreate
Shopify Expert
3571 639 916

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 Expert
3571 639 916

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 27 (27)

JHKCreate
Shopify Expert
3571 639 916

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 Expert
3571 639 916

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 Expert
3571 639 916

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

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
Shopify Partner
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 Expert
3571 639 916

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
Lucinne
Shopify Partner
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 1565

@Lucinne 
Which color do you want to put?

Lucinne
Shopify Partner
9 0 0

The color mark is : #803959

Zworthkey
Shopify Partner
5581 642 1565

@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
Shopify Partner
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 1565

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

Lucinne
Shopify Partner
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?

 

Zworthkey
Shopify Partner
5581 642 1565

@Lucinne 
Please Search  theme.css file.

Lucinne
Shopify Partner
9 0 0

Here is the theme.css ? 

Lucinne_0-1632143007547.png

 

Zworthkey
Shopify Partner
5581 642 1565

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

PRONO
Visitor
1 0 0

je ne trouve pas theme.scss.css

kywong1
Visitor
1 0 0

Hi! 

I would like to change the colour of 'Customized Sourcing' to orange #DC9456 on the top nav menu and mobile side menu. Could you please help?

 

Here's my website: https://sourcyglobal.com/

 

Thank you.

 

Kitty

JHKCreate
Shopify Expert
3571 639 916

Hi @kywong1 


Please add the following code to your stylesheet.css sheet at the very end:

 

#main-nav > li:nth-child(4) > a {
    color: #DC9456!important;
}


That should do it! Do like & mark as a solution if we've solved your issue 😉 Cheers!

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
Ameya_Pai
Visitor
1 0 0

Hi JHK, 

 

I think different codes work for different themes. as I use it on my store and unfortunately it did not work. I am using MINIMOG v2.5.0 (07/31) - BFCM Home theme.

 

I want to change the color of the menu "Diwali Edit" to the color red. Attaching the screenshot of the

website for your reference.

 

Ameya_Pai_0-1665650208208.png

 

 

Any help would be appreciated. Let me know if you need any more information from me.

 
ecommST
New Member
4 0 0

Hello,

 

I'd like to do kind of the same thing.  I added a "OUTLET" cat linking to another of my company website on the drilldown. And i'd like to have this OUTLET menu item in red. Which code shall I add and where ?

 

ThanksCapture d’écran (5).png

gracielees
Visitor
1 0 0

Can someone help me do this in debut theme?

lfhhelp12
Visitor
1 0 0

Looking for same help, i have https://www.lammfellhaus.de

And wanna change the color of the "Angebote" can somebody help me?