How do I change the colour of a single text link in my 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


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:

ul#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:

Specialists

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