Change color of a single nav menu item in desktop & mobile

Store Design
1

Hello to all the Shopify community :-),

I need help for CSS coding in the District Theme → I would like to change the text color of only one of my main navigation menu to highlight it and ideally, I would like for it to have a different focus/hover? color too.

site address: www.sunscreenr.com

Please see the screenshot below. I would like to highlight the “LEARN ABOUT UVREVEAL” menu item

SunscreenrSiteScreenshot.JPG
SunscreenrSiteScreenshot.JPG1038×849 68.8 KB

Thanks in advance for your assistance!!

1 Like
2

hello @dsc123

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

3

Thank you!

I just updated my question to include the site address

www.sunscreenr.com

it’s not password protected

4

hello @dsc123

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.site-nav li:nth-child(2) >a{
    color: #282896 !important;
}
.site-nav li:nth-child(2) >a:hover{
    color: #c72c2c !important;
}
5

Woohoo, it worked, thank you for your quick help!!

6

If helpful then please Like and Accept as Solution

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance

If you want any Shopify theme customization, making Websites Please feel free to contact me.

Email: natztech2312@gmail.com
Whatsapp: +91 8160595823
Skype Email: natztech2312@gmail.com
Company Website: https://candisoft.in

7

hey, i tried this but didn’t work for me. Could you please help me?
Here’s the link of my site : https://numic.in/
I want to change the font color of “Raksha Bandhan” in my navbar