CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcolorsnavbar
Callum
Callum

Reputation: 972

Change color of bootstrap navbar on hover link?

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>

Upvotes: 74

Views: 422433

Answers (17)

bunnyhu
bunnyhu

Reputation: 61

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

Upvotes: 1

MassDefect_
MassDefect_

Reputation: 1990

For Bootstrap 5 you can simply use:

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

Upvotes: 2

babibarbi
babibarbi

Reputation: 21

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

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

Upvotes: 0

vagdevi k
vagdevi k

Reputation: 1676

This helped me!

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

Upvotes: 0

Ajit Kumar
Ajit Kumar

Reputation: 111

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

Upvotes: 1

&#214;mer An
&#214;mer An

Reputation: 664

This should be enough:

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

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362290

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

Upvotes: 17

Farhan Ghaffar
Farhan Ghaffar

Reputation: 73

Sorry for late reply. You can only use:

   nav a:hover{

                   background-color:color name !important;


                 }

Upvotes: 4

Ujjwal Kumar Gupta
Ujjwal Kumar Gupta

Reputation: 2376

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

Upvotes: 4

Seydou Loum
Seydou Loum

Reputation: 221

You can try this to change the link background on hover

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

Upvotes: 18

Eric
Eric

Reputation: 185

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

Upvotes: 1

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102378

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

Upvotes: 95

trebor1979
trebor1979

Reputation: 1133

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.

Upvotes: 56

Shaharia Azam
Shaharia Azam

Reputation: 1978

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.

Upvotes: 0

socialCoder
socialCoder

Reputation: 77

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

Upvotes: 4

Gabriel Petrovay
Gabriel Petrovay

Reputation: 21864

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.

Upvotes: 9

Kevin Lynch
Kevin Lynch

Reputation: 24703

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

Upvotes: 4

Related Questions