How to change active link color in bootstrap css?

Question

I am using joomla 3 and bootstrap.min.js I am creating menu and giving special class in order to change hover, active, visited links and style of the menu. I could not find how

Answer 1

        $(function (){
            $('nav ul li a.sub-menu').each(function(){
                var path = window.location.href;
                var current = path.substring(path.lastIndexOf('/')+1);
                var url = $(this).attr('href');
                if(url == current){
                    $(this).addClass('active');
                };
            });     
        });

Answer 2

I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.

For instance,

#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}

Hope this helps.

Answer 3

In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.

Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).

Finally, if you are trying to do this using just CSS you have to add a specific class on the current link