Change color of bootstrap navbar on hover link?

Question

I want to know how to change the color of the links when you hover over them in the nav bar, as currently they are an ugly color.

Thanks for any suggestions?

Answer 1

You can try this to change the link background on hover

.nav > li > a:hover{
    background-color:#FCC;
}

Answer 2

Use Come thing link this , This is Based on Bootstrap 3.0

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #977EBD;
    color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #977EBD;
    color: #FFFFFF;
}

Answer 3

This should be enough:

.nav.navbar-nav li a:hover {
  color: red;
}

Answer 4

.nav > li > a:focus, 
.nav > li > a:hover 
{
    text-decoration: underline;
    background-color: pink;
}

Answer 5

Sorry for late reply. You can only use:

   nav a:hover{

                   background-color:color name !important;


                 }

Answer 6

Something like this has worked for me (with Bootstrap 3):

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
    font-family: proxima-nova;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
} 

In my case I also wanted the link text to remain black before the hover so i added .navbar-nav > li > a

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
    font-family: proxima-nova;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
}