How can I highlight a specific menu link by changing its color?

Please note that some of the changes recommended in this guide involve making direct changes to the theme code. If you encounter difficulties with this, please contact a third-party developer for more troubleshooting, customization, or functionality.

You may want to draw attention to a menu link in your header to inform your visitors about a special sale or encourage them to visit a particular page. This can be achieved by applying some custom CSS styling to a particular menu item.

First, we need to get the handle of the menu item. The easiest way to get this is go to your storefront, click on the menu item, then copy the URL of the page.

For example, the URL is:

https://sample-store.myshopify.com/pages/about-us

The handle is the last part of the URL which is:

/about-us

For Impulse, Motion and Streamline, add the handle to the CSS code below inside the quotation marks:

 .site-nav__link[href*="/about-us"], .mobile-nav__link[href*="/about-us"] {
    color: red !important;
}

For Expanse, Fetch, Gem and Vino, use the following code:

 .site-nav__link[href*="/about-us"], .slide-nav__link[href*="/about-us"] {
    color: red !important;
}

You can use any HTML color name or hex code that you want for the link color.

In your Shopify admin, navigate to Online store > Themes and click Edit theme on the theme you want to edit. Go to Theme settings > Custom CSS and add the code above.