Re: Change specific menu item colour

Solved

How can I change a specific menu item color and make it bold?

Toptoys2uHS
Explorer
87 1 9

Hello everyone.

I am currently trying to change the colour on a specific menu item & the dropdown items with it, as well as making the menu header bold. 

Specifically, I would the "Back to School" to be permanently red  and bold (as opposed to only red when hovered over), and the following items on the drop down to be red.

Screenshot 2023-07-21 085320.png

I have tried to implement many different types of code within theme.css at the bottom of the page, such as 

summary[data-href="/pages/contact-us"] {
color: blue !important;
}

OR

.site-nav__link[href="/collections/final-sale"] {
color: red;
}

but I have had no luck with this unfortunately.

Massive thanks in advance to anyone with a solution on implementing this!

Accepted Solution (1)

Toptoys2uHS
Explorer
87 1 9

This is an accepted solution.

Solved!

Here is the following code for anyone needing this in future.

 

.nav-bar__item a[href="/collections/back-to-school"] {
color: red;
}

.nav-bar__item a[href="/collections/back-to-school"] {
background-colour: #ff0303;
}

.nav-bar__item a[href="/collections/back-to-school"] {
font-size:22px;
font-weight:bold;
}

View solution in original post

Replies 8 (8)

websensepro
Shopify Partner
1127 115 138

Hi, @Toptoys2uHS.

 

Please share your store URL and password.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

ZestardTech
Shopify Partner
5725 1050 1384

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Toptoys2uHS
Explorer
87 1 9

This is an accepted solution.

Solved!

Here is the following code for anyone needing this in future.

 

.nav-bar__item a[href="/collections/back-to-school"] {
color: red;
}

.nav-bar__item a[href="/collections/back-to-school"] {
background-colour: #ff0303;
}

.nav-bar__item a[href="/collections/back-to-school"] {
font-size:22px;
font-weight:bold;
}

Nanaki
New Member
5 0 0

Thank you!
Could you be so kind to tell me where I have to paste this code exactly?

Toptoys2uHS
Explorer
87 1 9

Hello,

 

You can post this at the bottom of theme.css on the website theme code editing area

Nanaki
New Member
5 0 0

I'm using the Design "Ride".
I couldn't find the theme.css . 
Any other ideas? 😕

Toptoys2uHS
Explorer
87 1 9

Hello Nanaki,

 

I am not sure what it could be called as I use a different theme.

Essentially you just need to find the asset of code which contains the majority of code to control your site, and you should be able to add it in there.

 

Don't forget to make a duplicate before you make any changes in case it breaks your site.

 

Best of luck.

Bhaktraj
Visitor
2 0 0

my website url is trenfort.com 
It is based on a ride theme. I want to change the color of the menu bar to black color but when I try to change it from the theme option in the color scheme it also changes the color of the body and product page. Hence the black color text is not visible anymore!!