Change navbar bootstrap color to hover link?

Question

I want to know how to change the color of links when you hover over them in the navigation bar, as they are currently 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 it 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; } 

No more specifying this. Unfortunately, in this case !important is needed.

I also added :focus and :active to the same ad for accessibility reasons and for users of smartphones / tablets / touch screens.

Answer 3

You can try this to change the link background on hover

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

Answer 4

You will have to rewrite the CSS rule:

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

or

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

It depends if you use a dark or light theme, respectively. To do this, add CSS with your rewritten rules and make sure it goes into your HTML after Bootstrap CSS. For example:

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

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

Answer 5

Updated 2018

You can change the colors of Navbar links using CSS to override the colors of the bootstrap ...

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 color demo of navigation bar link

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 demo navigation bar link

---

Change or customize the entire color of the Navbar , see https://stackoverflow.com/a/167189/

Answer 6

Point the item you want to change and use !important to overwrite all existing styles assigned to that item. Be sure not to use the !important declaration unless it is 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 the "Come" link, it 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 the late reply. You can use only:

  nav a:hover{ background-color:color name !important; } 

Answer 10

Something like this 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 until 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 are Nabbar , follow these steps:

 <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 the hover color of your navigation brand

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

Thus, the navigation color of the navbad-brand will be changed to white. I just tested it and it works for me correctly.

Answer 12

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