Changing the font of a single menu item

Highlighted
New Member
1 0 0

Hello all,

I cannot for the life of me figure out how to change the font color of the 'SHOP' link in my main menu at shop.ownharmony.com.

I used css to style the button, but would like to change the hover color and the normal state color, but having trouble coming up with the exact css selector to do this.

I am using the debut theme.

Any help is greatly appreciated!

-Nick

0 Likes
Highlighted
Excursionist
25 6 5

You need to add a CSS class to the A element and then add CSS rules for it.

For example, you can add a "shop_button" class to the A element.

<a href="https://shop.ownharmony.com" class="site-nav__link site-nav__link--main shop_button">

Then add the following CSS.

a.shop_button {
    color: white;
}
a.shop_button:hover {
    color: lightblue;
}

 Just watch out for potentially overriding styles from the SPAN inside of the A.

0 Likes
Highlighted
Excursionist
25 6 5

Actually looking more closely, it seems that you are using the built-in navigation links to add the shop link, and then applying CSS onto that one specifically and styling it into a button.

Here's what you can do instead:

 

a.site-nav__link.site-nav__link--main[href="https://shop.ownharmony.com"] {
    color: white;
}
a.site-nav__link.site-nav__link--main[href="https://shop.ownharmony.com"]:hover {
    color: lightblue;
}

 

Yeah, I noticed you are trying the :nth-child approach. This will cause unwanted results if you ever choose to add more links to your navigation before the shop button. So instead, you could point the CSS to the link with a specific attribute value. It has that uniqueness.

Hope this helps! 

0 Likes