Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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!
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!
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!
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 ?
Yes I've edited the code a few minutes after posting, add both codes above for desktop and mobile!
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 !🙂
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!
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
gggh
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?
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/
Hi @Lucinne
Can you add the menu item so we can provide the code? It's not 100% the same.
Thanks!+
Thanks a lot for your help ! 🙂 I added the "Private Sales" tab to my menu
The color mark is : #803959
@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.
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.
@Lucinne
Not in theme. liquid.
Paste this code on top of the theme.scss file.
Thank You.
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?
Here is the theme.css ?
je ne trouve pas theme.scss.css
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
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!
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.
Any help would be appreciated. Let me know if you need any more information from me.
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 ?
Thanks
Can someone help me do this in debut theme?
Looking for same help, i have https://www.lammfellhaus.de
And wanna change the color of the "Angebote" can somebody help me?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024