Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 5
  • Created
  • Last Reply
  • 2 months later...

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 {
       > a,
       > a:visited,
       > label{
         color: #ffffff;

Link to comment
  • 1 year later...


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

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.