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?

HTML:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

For Bootstrap 3 this is how I did this based on the default Navbar structure:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #FFFF00;
    color: #FFC0CB;
}

Answer 2

This is cleaner:

ul.nav a:hover { color: #fff !important; }

There's no need to get more specific than this. Unfortunately, the !important is necessary in this instance.

I also added :focus and :active to the same declaration for accessibility reasons and for smartphone/tablet/touchscreen users.

Answer 3

You can try this to change the link background on hover

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

Answer 4

You would have to overwrite the CSS rule:

.navbar-inverse .brand, .navbar-inverse .nav > li > a

or

.navbar .brand, .navbar .nav > li > a 

depending if you are using the dark or light theme, respectively. To do this, add a CSS with your overwritten rules and make sure it comes in your HTML after the Bootstrap CSS. For example:

.navbar .brand, .navbar .nav > li > a {
    color: #D64848;
}
.navbar .brand, .navbar .nav > li > a:hover {
    color: #F56E6E;
}

There is also the alternative where you customize your own Boostrap here . In this case, in the Navbar section, you have the @navbarLinkColor .

Answer 5

Updated 2018

You can change the Navbar link colors with CSS to override Bootstrap colors...

Bootstrap 4

.navbar-nav .nav-item .nav-link {
    color: red;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
    color: pink;
}

Bootstrap 4 navbar link color demo

Bootstrap 3

.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .active > a{
    color: orange;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    color: red;
}

Bootstrap 3 navbar link color demo

---

The change or customize the entire Navbar color , see: https://stackoverflow.com/a/18530995/171456

Answer 6

Target the element you wish to change and use !important to overwrite any existing styles that are assigned to that element. Be sure not to use the !important declaration when it is not absolutely necessary.

div.navbar div.navbar-inner ul.nav a:hover {
    color: #fff !important; 
}

Answer 7

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

Answer 8

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 9

Sorry for late reply. You can only use:

   nav a:hover{

                   background-color:color name !important;


                 }

Answer 10

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

Answer 11

If you Navbar code as like as follow:

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

Then just use the following CSS style to change hover color of your navbar-brand

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
     color: white;
}

So your navbad-brand hover color will be changed to white. I just tested it and it's working for me correctly.

Answer 12

This should be enough:

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

Answer 13

 .navbar-default .navbar-nav > li > a{ color: #e9b846; } .navbar-default .navbar-nav > li > a:hover{ background-color: #e9b846; color: #FFFFFF; } 

Answer 14

This helped me!

.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color:  black;
}

Answer 15

After some time, that's what worked for me. Changing only css.

.navbar-inner .navbar-brand:hover {
    color: #fff;
}

Answer 16

For Bootstrap 5 you can simply use:

.nav-link:hover{
    color: green;
}