Change color of single main menu item

Solved

Change color of single main menu item

ArdenTeal
Tourist
5 0 5

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

Accepted Solution (1)
ZestardTech
Shopify Partner
5664 1036 1362

This is an 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;
}

 

ZestardTech_0-1718267714676.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 12 (12)

ZestardTech
Shopify Partner
5664 1036 1362

Hi @ArdenTeal 

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ArdenTeal
Tourist
5 0 5

Hi,

Store URL: https://ardenteal.com/

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

ZestardTech
Shopify Partner
5664 1036 1362

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;
}

 

ZestardTech_0-1718261111109.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ArdenTeal
Tourist
5 0 5

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

Screenshot 2024-06-13 at 3.56.43 PM.png

ZestardTech
Shopify Partner
5664 1036 1362

This is an 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;
}

 

ZestardTech_0-1718267714676.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ArdenTeal
Tourist
5 0 5

Thanks it works now 😊

PageFly-Noah
Shopify Partner
1317 233 268

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ArdenTeal
Tourist
5 0 5

Hi Noah,

Store URL: https://ardenteal.com/

PageFly-Noah
Shopify Partner
1317 233 268

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.

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Shopify Partner
1317 233 268

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Anshul_arora
Navigator
450 128 93

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

Anshul_arora_0-1718264070920.png

I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

Dan-From-Ryviu
Shopify Partner
8572 1690 1701

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

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.