CSS link properties when pointing to the currently active page

Question

Using bootstrap 3 on a drupal site, how can I change the color and weight of links pointing to the currently active page? I tried using a:active but that does not do what I was expecting.

possible duplicate of [How to change the link color of the current page with CSS](http://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-css) — Barett, May 25 '15 at 23:33
This is a drupal specific question - the duplicate linked does not match — kaz, May 26 '15 at 01:48

score 0 · Answer 1 · answered May 26 '15 at 01:48

On the server-side, you can make it with javascript.

The theory
Make a css class with the styles you want (you can name it .nav-active or whatever you want.
Then append the class to an element with a javascript click function, here's an example using jQuery.

$(".nav-item").click(function(){
    $(".nav-item").removeClass("nav-active");
    $(this).addClass("nav-active");
});

Here's a pen so you can see how it works:

http://codepen.io/edfreitas/pen/PqbWbP

thanks Eduardo, this lesson Im definately taking home with me. — Collins Areba, May 27 '15 at 06:08

score 0 · Accepted Answer · answered May 26 '15 at 01:52

Drupal is adding an "active" class to the links to the current page. This is different than setting the property of an <a> to "active". Use the selector a.active in your CSS instead of a:active. You should be able to inspect the properties in developer tools to ensure the class being added and how to target it.

CSS link properties when pointing to the currently active page

2 Answers2