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;
}
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 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.
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 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
}
I have a menu like this
Home -- Work -- Pricing -- Contact Us -- About
It is using one page layout. I have enabled the Scrollspy on Bootsrap. When I go to a specific div, the active menu background should be dynamic. So when the focus is on About, the background should change to the color as in the image.
Current CSS code is:
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #080808;
color: #FFFFFF;
}
Fiddle
Using some Javascript & jQuery, we can add listeners to each nav link that change the background of the nav accordingly:
$('nav > div.home').click(function () {
$('nav').css('background', 'blue');
});
$('nav > div.work').click(function () {
$('nav').css('background', 'red');
});
$('nav > div.pricing').click(function () {
$('nav').css('background', 'green');
});