Changing color of individual dropdown folder text in navigation - using 7.1

Hello community. I've been using Squarespace for a few years now, but new to the forums, and just now scratching the surface on css. Specifically what I'm looking to do is to customize individual colors of the dropdown folder text. I have found some great forum answers for customizing the navigation link colors (thanks for that!) but can't seem to find anything about changing the colors of the folders. Is that possible? I tried some variations of other coding I had found, but without success. Appreciate any help, thanks!

Hi,

Possibile. Can you share link to your site? We can check easier

Hello, thank you so much for your response. The website is santaspeaking.live

20 hours ago, twolineSTUDIO said:

Hello, thank you so much for your response. The website is santaspeaking.live

Add to Design > Custom CSS

a.header-nav-folder-title[href="/classic-call-me"] + div>div:nth-child(1) a {
    color: red;
}
a.header-nav-folder-title[href="/classic-call-me"] + div>div:nth-child(2) a {
    color: blue;
}
a.header-nav-folder-title[href="/classic-call-me"] + div>div:nth-child(3) a {
    color: violet;
}

Hell there. Thanks so much for your response. That worked great for the page links but I'm looking to change the color of the top folder drop down text, not the items within the drop down. Does that make sense?

So, to be specific, I'd like the words "New! Santa Pass" to be a different color.

Is this possible??

I attached an image to show you how your code did work for the page links 🙂

Thank you again!!

2 hours ago, twolineSTUDIO said:

Hell there. Thanks so much for your response. That worked great for the page links but I'm looking to change the color of the top folder drop down text, not the items within the drop down. Does that make sense?

So, to be specific, I'd like the words "New! Santa Pass" to be a different color.

Is this possible??

I attached an image to show you how your code did work for the page links 🙂

 

Thank you again!!

Try this code

.header-nav-item.header-nav-item--folder:nth-child(1)>a {
    color: violet !important;
}

.header-nav-item.header-nav-item--folder:nth-child(2)>a {
    color: brown !important;
}

Oh my goodness it worked YAY!!! Thank you SO much. Very grateful for brilliant people who know their stuff haha. I'm sure you'll be seeing us on here again. Have a blessed day!

Ok I do have one more question about this if you don't mind. Is it possible to specify a particular Hex color for the links or do they have to be 'red', 'blue', 'green', 'purple', etc.?

On 11/14/2021 at 11:41 PM, twolineSTUDIO said:

Ok I do have one more question about this if you don't mind. Is it possible to specify a particular Hex color for the links or do they have to be 'red', 'blue', 'green', 'purple', etc.?

You can use

• color name, eg: red, violet...
• color code, eg: #f1f2f3, #ff0, ..
• rgb color: rgb(0,255,210)
• rgba color: rgba(0,255,210,0.9)