change the default color of .active tab bootstrap
Question
I want to change the color of the active tab on my navbar, I'm using bootstrap, here's my code:
<body>
<nav class = "navbar navbar-default navbar-fixed-top">
<div class = "container-fluid">
<div class = "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</nav> </body>
I tried to change it with this but didn't work(css file):
.active {
background-color: green !important;
}
also like this(javascript file):
$(document).ready(function() {
$('.active').css("background-color", "green");
});
EDIT:
I tried to explain more with code snipet but the css part did not work for me,
if I add this to my css file:
.navbar {
background-color: yellow;
}
The whole bar turns yellow with the exception of the active tab, that color is the one that I want to change.
2 answers
solution1
7 ACCPTED 2016-05-30 21:10:31
Bootstrap does something really silly to me and puts just about all of the actual styling on the <a> tag in the navigation, instead of the <li> like most people would do. You should change most styles on .active a instead of just .active
.active a { background-color: green !important; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar"> <span class="fa fa-bars"></span> </button> <a class="navbar-brand" href="#">Navbar</a> </div> <div class="collapse navbar-collapse" id="main_navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu 1</a> </li> <li><a href="#">Menu 2</a> </li> <li><a href="#">Menu 3</a> </li> </ul> </div> </div> </nav>
solution2
0 2019-07-02 04:41:46
CSS is working if we do properly
<style>
a.active.nav-link{background-color: #17a2b8!important;}
</style>
Use this and you will be done. No need of Javascript
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.