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

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. Th 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 and Gem, 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 Customize on the theme you want to edit. Go to Theme settings > Custom CSS and add the code above.