Code Actions: Changing the colour of a single text link in the main Navigational menu

To change the colour of a single text link in your main navigational menu, you will need to use CSS code.

Where you insert the code varies depending on the theme you are using. More information about how to access your code can be found here:

https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-code

Your end result will look similar to this, where a single link has been highlighted red:

WeTheme help -change color of main nav link

In both of the examples, you can see below, the coding will change the menu color of any collection with an exact match URL/name in place of the tag sale

For illustration, in the above example, you would see 'Bikini' in place of 'sale' in the code.


Flow

At the bottom of 'timber.scss.liquid' in the "Assets" folder, add the following code and change out the URL you wish to target, plus the color:

#AccessibleNav a[href='/collections/sale'], li.mobile-nav__item a[href='/collections/sale'] {
color: #FF0000;
}
	

Envy

At the bottom of 'style.scss.liquid' in the "Assets" folder, add the following code and change out the URL you wish to target:

#main-navigation-wrapper li a[href='/collections/sale'], ul#mobile-menu--main-menu a[href='/collections/sale'] {
color: #ff0000;
}
	

Need more help with your code?

For further assistance with customising your code, we can highly recommend the following specialists grouped together for your convenience:

WeTheme Recommended Specialists Reference Guide

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.