I am using V3.3.6 of Bootstrap and I wanted the background-color of my Ņavbar to be a dark red. In addition to the standard Bootstrap CSS, I have my own css as shown below:
.navbar-inverse {
background-color: #9E1B34;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #9E1B34;
background-color: white;
}
The website is http://www.alkd.org.au
When hovering over each navbar item I get my correct styling of Red text and White background. But the background-color of the standard navbar is black, not dark red even though I have overridden the .navbar-inverse background-color. The browser developer tools shows that my css is the 'winning' one yet seems to be ignored. I cannot find anything in the developer tool that shows me where the black is coming from. I do have a javascript that adds the active class to the active page which sets the text color to red (which is working), but the background color should be white. Once again the developer tools shows that the active page background-color is white but it is being displayed as black.
Where is that black coming from? and whats the best way to get rid of it please?
The black color is actually coming from a gradient on the .navbar-inverse class.
Adding backgound-image none will override this.
.navbar-inverse {
background-color: #9E1B34;
background-image: none;
}
This also allows you to remove the !important which makes the code more maintainable.
The most simple solution:
.navbar-inverse {
background: #9E1B34;
}
Your background-color was covered by background-image property that created black gradient.
Now, combined property background allows you to set new background color, while setting background-image to none.
Related
I am using a free template from Start Bootstrap. (http://blackrockdigital.github.io/startbootstrap-freelancer/)
When you scroll down at the page, you can see that the menu item that is active has a bit darker background color.
And I want to change the background color of the menu items while they're active but I can't get it to work.
I've tried every option I knew so far to do this.
Could anyone help me with the css needed for this?
This is the rule you have to overwrite:
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: yellow; //Use your color here
}
The color you have to change is the <a>background (when it is active).
In your custom CSS place:
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #ffffff;
background-color: #1a242f;
}
Then you can change the color and background accordingly.
Make sure your custom CSS is included BELOW the bootstrap file or it will not work.
I would like to change the font colour of the menu items to #84912C on the website http://www.taranoone.ie when:
a) On the current page
b) On hover
Iv tried doing it and while I have changed the over all colour of the menu, I think I might be having problems of specificity.
Thanks
.navbar-default .navbar-nav > li > a:active {
color: #84912C;
}
and
.navbar-default .navbar-nav > li > a:hover {
color: #84912C;
}
I am attempting to override a Bootstrap specification. I have a scaffold file ahead of the Bootstrap file. However, the Bootstrap specification is being selected, providing White instead of Green. Why is this happening?
I understand that the A tag has 4 pseudo classes: link, hover, active and visited. I am just dealing with reality and Bootstrap.
The selector is:
.navbar-inverse .navbar-nav > li > a:focus
The combined CSS file has these related specifications in this order:
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:active {
color: green;
background-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: transparent;
}
A picture of the selection:
All help appreciated.
This does make sense, right? The latter spec overwrites the first one. You have two options:
Change the order of the declarations;
Make your spec more specific (a more specific selector, or use !important if you need a last resort).
Try adding
!important
Add the end of you css line That is overwritten. Or change the order of your css.
I'm using Angular to let the user change the color of a bootstrap navbar. The actual background color change itself is simple enough, but I also want to change some related elements like the border-color and some of the shadows.
What I have:
<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">
How would I go about using user.topBarBackgroundColor to define some shade (e.g. a darker shade) for the navbar's border, highlighted lis, etc?
Note that the text color can be changed independently, so any methods should apply to that in parallel as well.
EDIT
I only need this to work in modern browsers, so any adopted CSS3, HTML5, etc is fair game
I solved this by creating a .navbar-rgba-colors class and adding it to the .navbar element. The CSS (LESS) below overrides the relevant bootstrap defaults:
.navbar-rgba-colors {
border-color: rgba(0,0,0,0.2);
.navbar-nav > li > a,
a.navbar-brand {
opacity: 0.7;
}
.navbar-nav > li:hover > a,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus,
.navbar-nav > li.open > a,
.navbar-nav > li.open > a:hover,
.navbar-nav > li.open > a:focus
a.navbar-brand:hover,
.navbar-header:hover > a,
a.navbar-brand:focus {
opacity: 1;
background: rgba(255, 255, 255, 0.1) !important;
}
}
The opacity change makes the text appear brighter on hover, while the background makes the focused/active a element appear lighter as well.
Then I implemented in the HTML like so:
<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">
and for any a elements within the navbar:
<a ... ng-style="{ color: user.topBarColor }">Home</a>
Now changing the hex values for topBarBackgroundColor and topBarColor changes the background color and text color of the navbar, respectively. I'm using angular-bootstrap-colorpicker for that and it seems to be working well.
I am currently working on a website for a client using Joomla www.bisdynamics.com
On the desktop version of the site, on the main navigation for the current menu item, the link appears with a blue surround #0088cc. I have searched high and low in the template.css for where this is controlled but to no avail. I have also looked for the RGB version of this colour. Would any of you guys happen to know where I can find it?
Thanks :)
Line 9 of bootstrap.css you'll see this, which is your culprit.
.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
background-color: #0088CC;
color: #FFFFFF;
}
Its located in boostrap.min.css line 9
.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills > .active> a:focus{
color: #FFF;
background-color: #08C
}