Change color of single main menu item

[ArdenTeal]

Hi how can I change the color of a single main menu item for Retina theme?

[ZestardTech]

Hi @ArdenTeal 

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[ArdenTeal]

Hi,

Store URL: https://ardenteal.com/

Our store is live and there is no password required. Thanks.

[ZestardTech]

Hi @ArdenTeal 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.main-nav__tier-1-item a[href="/collections/final-sale"] {
color: red;
}

[ArdenTeal]

Hi I have implemented the code but the color is still not changing. What am I doing wrong?

[ZestardTech · Accepted solution]

Hi @Anshul_arora 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.main-nav__tier-1-item:nth-last-child(1) summary.main-nav__tier-1-link {
color: red;
}

[ArdenTeal]

Thanks it works now 😊

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @ArdenTeal  I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[ArdenTeal]

Hi Noah,

Store URL: https://ardenteal.com/

[PageFly-Noah]

Hi @ArdenTeal   I can ask explain more ? Do you mean you want to change the color of the entire main menu text, or just change the color of the menu when selecting that menu?
Thank you.

[PageFly-Noah]

Hi @ArdenTeal  Please add code here to change color:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

This is code change color all text menu:

<style>
.site-header__navigation ul li a{
   color: green !important;
}
</style>

This is code only change text when you selected:

<style>
.site-header__navigation ul li a:visited{
  color: #b75100 !important;
}
</style>

Hope my solution will help you resolve the issue.

Thank you so much.

[Anshul_arora]

Hello @ArdenTeal ,

I understand you are looking to change the color of the menu item of the navigation menu.

You can implement this change using CSS code

I have mentioned a code for changing the color of the 'Sale' menu item.

Add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>
a[href="/collections/final-sale"] {
color: red;
}
</style>

[You can implement this code for highlighting any other menu item as well, however, you have to only replace the 'href' link to the respective menu item.]

Output will be like this -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

[Dan-From-Ryviu]

Hi @ArdenTeal 
What single menu do you want to change color?