Jump to content

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

Recommended Posts

Posted

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!

  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply
Posted
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

Screen Shot 2021-11-13 at 6.55.43 PM.png

Posted
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!!

Screen Shot 2021-11-13 at 6.55.43 PM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.