CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jesus Mendoza
Jesus Mendoza

Reputation: 323

How to remove clicked color on links from navbar-default

I want to remove the color of clicked elements on bootstrap navbar-default because I'm having a little problem with data-spy and clicked elements (If I scroll to another section manually the link I clicked before stays with color).

I want to remove the clicked link color but I want to keep the data-spy color. Anyone has an idea of how to do this?

I tried with 

.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
}

But it removes both colors

Upvotes: 0

Views: 1101

Answers (3)

Sulung Nugroho
Sulung Nugroho

Reputation: 1683

Try this :

.navbar-default .navbar-right > li > a, 
.navbar-default .navbar-right > li > a:hover, 
.navbar-default .navbar-right > li > a:active,
.navbar-default .navbar-right > li > a:visited,
.navbar-default .navbar-right > li > a:focus
{ 
    color: #fff; background: transparent;
} 

.navbar-default .navbar-right > li.dropdown > a, 
.navbar-default .navbar-right > li.dropdown > a:hover, 
.navbar-default .navbar-right > li.dropdown > a:active,
.navbar-default .navbar-right > li.dropdown > a:visited,
.navbar-default .navbar-right > li.dropdown > a:focus
{ 
    color: #fff; background: transparent;
}

Upvotes: 1

Jesus Mendoza
Jesus Mendoza

Reputation: 323

In case someone has the same problem in the future, I solved it like this

/*Changes the color of the navigation text*/
.navbar-default .navbar-nav li a {
        color: #fff;
    }

/*Removes background color and text color from navigation items on hover & on focus*/
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus {
    color: #fff;
    background: transparent;
}

/*Removes background color and changes the text color of active items using scroll-spy*/
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus {
    background: transparent;
    color: #ccc;
}

Upvotes: 0

Flash Thunder
Flash Thunder

Reputation: 12045

Use :visited and :active selectors instead of :focus.

Upvotes: 2

Related Questions