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

Store Design
1

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
Screenshot 2023-07-21 085320.png1303×211 264 KB

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!

1 Like
2

Hi, @Toptoys2uHS .

Please share your store URL and password.

3

Hello There,

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

4

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;
}

5

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

6

Hello,

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

1 Like
7

I’m using the Design “Ride”.
I couldn’t find the theme.css .
Any other ideas? :confused:

8

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.

9

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!!