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');
});
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 have a bootstrap navbar solution with an hover dropdown.
It's something like this: http://bootsnipp.com/snippets/E7KEy
My problem is, that I need clickable links in the navbar.
Every dropdown parent should be a link. At the moment, the "dropdown-toggle" class didn't allow this.
In the mobile view, I need an extra link to open the dropdown because the parent item should stay clickable.
Are there any ideas for a solution?
One of the options is to use jQuery to show submenus; In a similar way how bootstrap loads menus.
Following is the code to do so and it worked very well for me:
$('ul.nav li.dropdown, li.dropdown-submenu').hover(function () {
$('> .dropdown-menu', $(this)).stop(true, true).delay(1000).show();
$(this).addClass('open');
}, function () {
$('> .dropdown-menu', $(this)).stop(true, true).delay(1000).hide();
$(this).removeClass('open');
});
In css file on line number 55 change replace it with this code.
.navbar-default .navbar-nav .open .dropdown-menu > li > a:click,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
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'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.