Menu
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:
510
Use any of the . bg-color classes to add a background color to the navbar.
In order to change the hub navigation bar color, we can go to site settings of hub site>Change the look>under the header section>Background> select a theme color to change the background color of your site header.
You need to add CSS to .active instead of .active a.
Fiddle: http://jsfiddle.net/T5X6h/2/
Something like this:
.navbar-default .navbar-nav > .active{
color: #000;
background: #d65c14;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000;
background: #d65c14;
}
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;
}
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.
27
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.
28
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
