Jump to content

Header Navigation Active Color Question

Recommended Posts

Site URL: https://kirklinchristianchurch1.squarespace.com/

Hey guys,

On the site i'm building, I have folders with the site pages in them. I'm using the code here:

//Add color to active folder
.header-nav-item--active a {
  color: #f56600 !important;
 }

It colors the active folder, but the color spills over into the rest of the folder, so all the pages in the folder are highlighted. Is there a way to just have the folder highlighted? And maybe underline the specific page i'm on?? Might be too tall an order 😅 Thanks in advance!

Password: 1234

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

On 2/3/2022 at 11:29 AM, ben2345 said:

Site URL: https://kirklinchristianchurch1.squarespace.com/

Hey guys,

On the site i'm building, I have folders with the site pages in them. I'm using the code here:

//Add color to active folder
.header-nav-item--active a {
  color: #f56600 !important;
 }

It colors the active folder, but the color spills over into the rest of the folder, so all the pages in the folder are highlighted. Is there a way to just have the folder highlighted? And maybe underline the specific page i'm on?? Might be too tall an order 😅 Thanks in advance!

Password: 1234

You can try the following code in Home > Design > Custom Css to setting color for the active navigator

body:not(.header--menu-open) .header-nav-wrapper .header-nav-item--active > a, 
body:not(.header--menu-open) .header-nav-wrapper .header-nav-folder-item--active > a {
  color: red;
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.