CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Darcy Paterson
Darcy Paterson

Reputation: 95

Bootstrap CSS Nav class background color change in the hover state

I can not change the background color of the Nav class or element with Bootstrap. The other styles change, like color, however the background color will not. Any ideas?

HTML

<div class="row">
    <div class="col-md-12">
        <nav role="navigation">
            <ul class="nav nav-pills nav-justified">
                <li><a href="index.html">Home</a></li>
                <li><a href="who.html">Who We Are</a></li>
                <li><a href="our_home.html">Our Homes</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>
</div>

CSS

nav ul li a {
    color:#007ECF;  
    border-width:1px;
    border-color:#007ECF;
    border-style:solid;
    margin:0 .2em;
    background-color: rgba(23, 134, 145, .2);
}
nav ul li a:hover {
    color:red;
    background-color:rgba(123, 45, 198, .9);
}

Upvotes: 0

Views: 6295

Answers (2)

RMH
RMH

Reputation: 831

Using important can definitely do the trick.

However, you should check your order of operation.

In bootstrap it is typically

nav ul li:hover a {background: red}

that should give you the desired result

Upvotes: 2

Parixit
Parixit

Reputation: 3855

You can give higher preference to your style like following

nav ul li a:hover {
    color:red !important;
    background-color:rgba(123, 45, 198, .9) !important;
}

Upvotes: 2

Related Questions