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>

Thanks, but in future please post your HTML (and any other code) *into the question itself*, that way it's legible to viewers. — David Thomas, May 18 '13 at 15:40

score 93 · Answer 1 · answered Oct 06 '13 at 00:00

93

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

answered Oct 06 '13 at 00:00

Leniel Maccaferri

100,159
46
371
480

4

upvote because the specificity keeps from having to use !important. Not that !important can't be used sometimes but I like this better. – isimmons Dec 13 '13 at 02:44
3

For me it worked with navbar instead of navbar-default. Obviously depends on the implementation. – logic Feb 10 '16 at 01:55

score 55 · Answer 2 · answered Sep 27 '13 at 20:34

55

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.

answered Sep 27 '13 at 20:34

trebor1979

1,123
9
6

4
Try using this is a complex site and not ruin your site. You need to use class names. If you have another
– M H May 08 '15 at 14:31

Seydou Loum · Answer 3 · 2015-06-27T05:49:45.420

18

You can try this to change the link background on hover

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

edited Jun 27 '15 at 05:49

answered Jun 26 '15 at 06:31

Seydou Loum

211
2
5

1

Please add some description to your answer. – Mohit Jain Jun 26 '15 at 06:59
Thank you -Worked - but using bootstrap 4 – anand24 Sep 15 '18 at 16:58

Carol Skelly · Answer 4 · 2018-03-21T12:14:23.297

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

Gabriel Petrovay · Answer 5 · 2013-05-18T15:50:23.103

8

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.

edited May 18 '13 at 15:50

answered May 18 '13 at 15:40

Gabriel Petrovay

20,476
22
97
168

hmm when i search for those two statements, it comes back saying they cant be found? Shall i post the css for bootstrap? – Callum May 18 '13 at 15:42

score 4 · Answer 6 · answered May 18 '13 at 15:45

4

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

answered May 18 '13 at 15:45

Kevin Lynch

24,427
3
36
37

1

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 – Callum May 18 '13 at 15:49
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. – Kevin Lynch May 18 '13 at 15:51

score 4 · Answer 7 · edited Aug 21 '13 at 18:42

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

score 4 · Answer 8 · edited Feb 11 '16 at 06:27

4

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

edited Feb 11 '16 at 06:27

Natalie Hedström

2,607
3
25
36

answered Feb 10 '16 at 13:24

Ujjwal Kumar Gupta

2,308
1
21
32

score 4 · Answer 9 · answered Jun 07 '17 at 10:29

4

Sorry for late reply. You can only use:

   nav a:hover{

                   background-color:color name !important;


                 }

answered Jun 07 '17 at 10:29

Farhan Ghaffar

73
3

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. – Friedrich Große Jun 07 '17 at 10:56

score 1 · Answer 10 · answered Jun 03 '14 at 15:20

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

score 1 · Answer 11 · answered Aug 19 '19 at 06:07

1

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

answered Aug 19 '19 at 06:07

Ajit Kumar

111
1
2

is it different from other answers? – Akber Iqbal Aug 19 '19 at 06:27

score 0 · Answer 12 · answered Aug 24 '13 at 21:50

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.

score 0 · Answer 13 · answered Jan 08 '19 at 10:49

0

This should be enough:

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

answered Jan 08 '19 at 10:49

Ömer An

600
5
16

score 0 · Answer 14 · answered Feb 08 '22 at 00:46

0

This helped me!

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

answered Feb 08 '22 at 00:46

vagdevi k

1,478
9
25

score 0 · Answer 15 · answered Aug 30 '22 at 17:09

0

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

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

answered Aug 30 '22 at 17:09

babibarbi

1
3

score 0 · Answer 16 · answered Dec 29 '22 at 18:26

0

For Bootstrap 5 you can simply use:

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

answered Dec 29 '22 at 18:26

MassDefect_

1,821
3
20
24

score 0 · Answer 17 · answered Aug 22 '23 at 19:41

0

With bootstrap 5 the best if you familiar with scss recompile.

Add in the _nav.scss this for a dark gray for example then rebuild the css files:

.nav-item {
  &:hover, &:focus {
      background-color: $gray-800;
    }
}

answered Aug 22 '23 at 19:41

bunnyhu

21
3

Change color of bootstrap navbar on hover link?

17 Answers17

Linked

Related