Change The Colour Of A Single Main Menu Item

[WinnieLim]

Hello to all the Shopify community :-),

I need help for CSS coding on Lammer Theme 2023 -> I would like to change the text color of only one of my main navigation menu to highlight it.

The "SALE" navigation menu should appear In Red rather than grey.
I tried to quibble with the code but nothing to do, the color does not change. I'm having trouble identifying my menu or placing my code incorrectly on my CSS stylesheet.

Website - https://mypuras.com/

Thank You!

[Asad-Mahmood]

Use this css

a[href="/collections/last-chance"] {
  color: red !important;
}

[tim]

The best way in my opinion is to target by the URL these links point to:

         nav [href="/collections/last-chance"],
.drawer__nav [href="/collections/last-chance"] {
  color: red;
}

This code you should put into "Custom CSS" setting under "Theme settings" in "Customize"

[ZestardTech]

Hello @WinnieLim ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

ul.site-nav > li:first-child > a {
    color: red !important;
}

Let me know if you need further assistance!

[sgtlab]

Hi

You can try this snippet.

<style>
li.site-nav__item:first-child a.site-nav__link { color: red; }
li.site-nav__item:first-child a.site-nav__link:hover{ color: red; }
li.site-nav__item:first-child a.site-nav__link .site-nav__title::before { border-bottom: 2px solid red;}
</style>

Here's how it will look

 

You can see a live preview and learn how to import this snippet into your store here:

https://shop-booster.sgt-lab.com/snippet/mypurascom?snippetId=1745488507475

Hope this helps!

[WinnieLim]

Thank you, your method works for me and showed me where to insert the code successfully.