I have added custom CSS for the active li element of navbar. But it seems to be picking the default color. Other colors such as navbar BG and text color seems to have changes properly.
The modified CSS rules are as follows:
.navbar-default {
background-color: #7b431a;
border-color: #d65c14;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #8a0e0b;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #8a0e0b;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #8a0e0b;
background-color: #d65c14;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #8a0e0b;
background-color: #d65c14;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #8a0e0b;
border-bottom-color: #8a0e0b;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #8a0e0b;
border-bottom-color: #8a0e0b;
}
.navbar-default .navbar-toggle {
border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #d65c14;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
The HTML is:
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Poducts</a></li>
<li class="active"><a href="#">Gallery</a></li>
</ul>
</nav>
The output navbar is as follows:
This question is related to
css
twitter-bootstrap
The answer is
Well, I had a similar challenge. Using the inspect element tool in Firefox, I was able to trace the markup and the CSS used to style the link when clicked. On click, the list item (li) is given a class of .open and it's the anchor tag in the class that is formatted with the grey color background.
To fix this, just add this to your stylesheet.
.nav .open > a
{
background:#759ad6;
// Put in styling
}
Did you include "bootstrap-theme.css" files on your code?
In "bootstrap-theme.min.css" files, background-image about ".active" is existed for "navbar" (check this screenshot: http://i.imgur.com/1etLIyY.png).
It will re-declare your style code, and then it will be effected on your code.
So after you delete or re-declare them (background-image), you can use your background color style about the ".active" tag.
In Bootstrap 3.3.x make sure you use the scrollspy JavaScript capability to track active elements. It's easy to include it in your HTML. Just do the following:
<body data-spy="scroll" data-target="Id or class of the element you want to track">
In most cases I usually track active elements on my navbar, so I do the following:
<body data-spy="scroll" data-target=".navbar-fixed-top" >
Now in your CSS you can target .navbar-fixed-top .active a:
.navbar-fixed-top .active a {
// Put in some styling
}
This should work if you are tracking active li elements in your top fixed navigation bar.
in my case just removing background-image from nav-bar item solved the problem
.navbar-default .navbar-nav > .active > a:focus {
.
.
.
background-image: none;
}
In my own bootstrap.css that I load after the bootstrap.min.css only that, switch of the background image with !important works for me:
.navbar-nav li a:hover, .navbar-nav > .active > a {
color: #fff !important;
background-color:#f4511e !important;
background-image: none !important;
}
Source: Stackoverflow.com