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);
}
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;
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.