Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to change menu item color

Solved

How can I change the color of a menu item on my website?

southstar
Tourist
4 0 1

Hi,
I have spent the last 3 hours ripping my hair out over this.
All I want to do is change the menu item "Sale" to red.... that's it,

https://tokyobricks.com

I'm using the code:
.site-nav__link {[href="/collections/sale"] 
color: red;
}

 

I've even tried !important but every time when I go to inspect my code is crossed out as if the theme is overwriting any changes.
The theme is boost.

 

Would really appreciate some help as It would pain me for something so simple to get the better of me.

Thanks a lot 

Accepted Solution (1)

GemPages
Shopify Partner
5625 1262 1254

This is an accepted solution.

Hello @southstar ,

 

It's GemPages support team and glad to support you today.

 

Let's try adding this code:

.site-nav > .site-nav__item > .site-nav__link[href="/collections/sale"] {
    color: red !important;
}

 

I tried and it displayed like that:

GemPages_0-1669686226435.png

 

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 4 (4)

Guleria
Shopify Partner
3688 741 1038

Please use this css

.site-nav__item a[href="/collections/sale"] {
    color: red !important;
}
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

GemPages
Shopify Partner
5625 1262 1254

This is an accepted solution.

Hello @southstar ,

 

It's GemPages support team and glad to support you today.

 

Let's try adding this code:

.site-nav > .site-nav__item > .site-nav__link[href="/collections/sale"] {
    color: red !important;
}

 

I tried and it displayed like that:

GemPages_0-1669686226435.png

 

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

Denishamakwana
Shopify Partner
1408 173 232

Please add below css code in bottom of assets/styles.css file

ul.nav.site-nav li:nth-child(3) a {
         color: red;
}
Thank you.
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

Litos
Globetrotter
688 169 149

Hi @southstar,

Go to Assets > styles.css and paste this at the bottom of the file:

.site-nav .site-nav__item:nth-child(3) .site-nav__link {
    color: #ff0000;
}

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.