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>

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

Solution 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.

Solution 3

You can try this to change the link background on hover

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

Solution 4

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

Solution 5

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.

View more solutions

Comments

[Callum]

hmm when i search for those two statements, it comes back saying they cant be found? Shall i post the css for bootstrap?

[Callum]

I just cant find any hover statement which affects the navbars hover. It seems like the .navbar-link:hover, statement, would do it but it does not

[Kevin Lynch]

if you copy and paste my code into your css it will take over the nav bar current attribute and apply this one for hover.

[isimmons]

upvote because the specificity keeps from having to use !important. Not that !important can't be used sometimes but I like this better.

[M H]

Try using this is a complex site and not ruin your site. You need to use class names. If you have another <ul> with a <nav> inside with an <a> tag inside that it, this style will effect it as well.

[Mohit Jain]

Please add some description to your answer.

[logic]

For me it worked with navbar instead of navbar-default. Obviously depends on the implementation.

[Friedrich Große]

Hey Farhan, it seems this is exactly the same solution that was added by trebor1979 at answered Sep 27 '13 or am I missing some detail here? :) P.S. sorry for the comment spam in your inbox. The stackoverflow UI was fooling me into submitting my comment early.

[anand24]

Thank you -Worked - but using bootstrap 4

[Akber Iqbal]

is it different from other answers?