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

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

maybe try this:

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

Thanks so posting but this unfortunately this method does not work.

Any other solutions will be much appreciated.

Good idea.

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

This one worked on my Bedford site:

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