Menu
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.
946
You can always modify your navigation list through css. Use this css code instead, in that way use you use the a tag to change the color and its background-color. It's improper to use the li tag to set the background only and a tag to set the color of the text.
Just add the class to your html. This will make the first tab active by default.
Answer. Answer: Word's default tabs are set every half-inch. These tabs are indicated at the bottom of the horizontal ruler by tiny tick marks.
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>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
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
