Saturday, May 11, 2024
 Popular · Latest · Hot · Upcoming
19
rated 0 times [  21] [ 2]  / answers: 1 / hits: 28248  / 8 Years ago, mon, may 30, 2016, 12:00:00

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.


More From » jquery

 Answers
22

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>




[#61959] Saturday, May 28, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
stefanicarolinat

Total Points: 145
Total Questions: 91
Total Answers: 93

Location: Cambodia
Member since Thu, Oct 7, 2021
3 Years ago
stefanicarolinat questions
Mon, Nov 15, 21, 00:00, 3 Years ago
Fri, Apr 16, 21, 00:00, 3 Years ago
Thu, Oct 15, 20, 00:00, 4 Years ago
Fri, Jul 17, 20, 00:00, 4 Years ago
;