Jump to content

Bedford: How to change the link color of the current page with CSS?

Recommended Posts

Posted

I’m amazed that no straightforward solution exists to customise the current page active link.

In Bedford, using the 'Nav Link (Active)' property changes link colour of the current page and also all other links on mouse hover.

A specific property for 'Nav Link (Current Page)' is required. My code doesn’t work, so any ideas you may have will be much appreciated:


#headerNav nav .active-link { color: #d14836 !important; }

This method works in the Dovetail template, but it has no effect in Bedford:


#topNav ul li.active-folder a { color: #d14836 !important; }


  • Replies 5
  • Views 23.2k
  • Created
  • Last Reply
Posted

maybe try this:



#headerNav nav a:active {
color: #d14836 !important;
}



  • 2 months later...
Posted

Finally found the answer to my question by examining the 'base.less' file in the Styles folder in Developer mode.

Place this code in your Custom CSS and you will be able to change the color of your active page link to whatever you desire:


#headerNav nav, 
   #sidecarNav nav {
     .active{
       > a,
       > a:visited,
       > label{
         color: #ffffff;
      }
   }
}

  • 1 year later...
Posted

This one worked on my Bedford site:


#headerNav nav .active a:visited, #sidecarNav nav .active a:visited{
 color:red !important;
}

Archived

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

Guest
This topic is now 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.