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    lt div class  container  gt       lt div class  navbar  gt           lt div class  navbar-inner  gt               lt ul class  nav  gt                   lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                   lt li gt  lt a href     gt Link One lt  a gt  lt  li gt                   lt li gt  lt a href     gt Link Two lt  a gt  lt  li gt                   lt li gt  lt a href     gt Link Three lt  a gt  lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

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.

User · Answer

Something like this has worked for me  with Bootstrap 3     navbar-nav  gt  li  gt  a hover   navbar-default  navbar-nav  gt  li  gt  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  gt  li  gt  a hover   navbar-default  navbar-nav  gt  li  gt  a focus   navbar-nav  gt  li  gt  a      font-family  proxima-nova      font-style  normal      font-weight  100      letter-spacing  3px      text-transform  uppercase      color  black

User · Answer

You can try this to change the link background on hover   nav  gt  li  gt  a hover      background-color  FCC

User · Answer

Sorry for late reply  You can only use      nav a hover                      background-color color name  important

User · Answer

nav  gt  li  gt  a focus    nav  gt  li  gt  a hover        text-decoration  underline      background-color  pink

User · Answer

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

User · Answer

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  gt  li  gt  a   navbar  navbar-nav  gt   active  gt  a      color  orange      navbar  navbar-nav  gt  li  gt  a hover   navbar  navbar-nav  gt  li  gt  a focus   navbar  navbar-nav  gt   active  gt  a hover   navbar  navbar-nav  gt   active  gt  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

User · Answer

If you Navbar code as like as follow      lt div class  navbar navbar-default navbar-fixed-top  gt   lt div class  container  gt       lt div class  navbar-header  gt           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt           lt  button gt           lt a class  navbar-brand  href     gt Project name lt  a gt       lt  div gt       lt div class  navbar-collapse collapse  gt           lt ul class  nav navbar-nav  gt               lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt               lt li gt  lt a href   about  gt About lt  a gt  lt  li gt               lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt               lt li class  dropdown  gt                   lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                   lt ul class  dropdown-menu  gt                       lt li gt  lt a href     gt Action lt  a gt  lt  li gt                       lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                       lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                       lt li class  divider  gt  lt  li gt                       lt li class  dropdown-header  gt Nav header lt  li gt                       lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                       lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt                   lt  ul gt               lt  li gt           lt  ul gt           lt ul class  nav navbar-nav navbar-right  gt               lt li gt  lt a href     navbar   gt Default lt  a gt  lt  li gt               lt li gt  lt a href     navbar-static-top   gt Static top lt  a gt  lt  li gt               lt li class  active  gt  lt a href      gt Fixed top lt  a gt  lt  li gt           lt  ul gt       lt  div gt  lt  --  nav-collapse -- gt   lt  div gt      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

User · Answer

This should be enough    nav navbar-nav li a hover     color  red

User · Answer

x000D   x000D   navbar-default  navbar-nav  gt  li  gt  a  x000D    color   e9b846  x000D    x000D   navbar-default  navbar-nav  gt  li  gt  a hover  x000D    background-color   e9b846  x000D    color   FFFFFF  x000D    x000D   x000D   x000D

User · Answer

Use Come thing link this   This is Based on Bootstrap 3 0   navbar-default  navbar-nav  gt   active  gt  a   navbar-default  navbar-nav  gt   active  gt  a hover   navbar-default  navbar-nav  gt   active  gt  a focus       background-color   977EBD      color   FFFFFF      navbar-default  navbar-nav  gt  li  gt  a hover   navbar-default  navbar-nav  gt  li  gt  a focus       background-color   977EBD      color   FFFFFF

User · Answer

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

User · Answer

For Bootstrap 3 this is how I did this based on the default Navbar structure    navbar-default  navbar-nav  gt  li  gt  a hover   navbar-default  navbar-nav  gt  li  gt  a focus       background-color   FFFF00      color   FFC0CB

[html] Change color of bootstrap navbar on hover link?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to colors

Examples related to navbar