Jump to content

Different colour of just one item in Folder Navigation

Recommended Posts

  • Replies 5
  • Views 643
  • Created
  • Last Reply

Hi! Try adding this css code to Custom CSS. Replace red with whatever color hex value you wish to use.

.Header-nav .Header-nav-folder-item[href="/healthandfitness"] {
  color: red;
} 

Note, with this solution it will break if you change the URL.

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
14 hours ago, NickScola said:

Hi! Try adding this css code to Custom CSS. Replace red with whatever color hex value you wish to use.

.Header-nav .Header-nav-folder-item[href="/healthandfitness"] {
  color: red;
} 

Note, with this solution it will break if you change the URL.

Thanks so much, worked a treat!!

Link to comment
14 hours ago, NickScola said:

Hi! Try adding this css code to Custom CSS. Replace red with whatever color hex value you wish to use.

.Header-nav .Header-nav-folder-item[href="/healthandfitness"] {
  color: red;
} 

Note, with this solution it will break if you change the URL.

One more question, just noticed it only works on desktop, any chance to also make it work on mobile?

Link to comment
7 hours ago, Steffen said:

One more question, just noticed it only works on desktop, any chance to also make it work on mobile?

Ah, so it looks like Mobile Navigation has a totally different class. Here's an updated code:

.Header-nav .Header-nav-folder-item[href="/healthandfitness"], 
.Mobile-overlay-folder-item[href="/healthandfitness"] {
  color: red;
} 

 

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
1 hour ago, NickScola said:

Ah, so it looks like Mobile Navigation has a totally different class. Here's an updated code:

.Header-nav .Header-nav-folder-item[href="/healthandfitness"], 
.Mobile-overlay-folder-item[href="/healthandfitness"] {
  color: red;
} 

 

Brilliant. worked. Thanks for the help, really appreciated!

Link to comment

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.