I'm working with some (Bootstrap) CSS. Right now, I'm retexturing the navbar. This is the CSS for the section I am working on.
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #transparent;
}
I am working specifically on the background section. I want to draw a band of color at the top, and then have transparency (or another color) beneath. Unlike a gradient, I do not want these to blend. I created this mockup in Photoshop (the black represents the part that I want transparent, if possible).
Mockup Image
I'm not sure if this is what you want, but try adding a border top:
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #transparent;
border-top: 3px solid #FF9900;
}
Related
I am currently trying to create a web-based page by creating a new, default ASP.NET Web Application (.Net Framework) and I found out that I can change the colour of the navigation bar by adding the following code to the "Site.css" in the content file.
.navbar-inverse {
background-color: #74D6FF;
border-color: #74D6FF;
}
I also know that I can change the text for all the different text tabs within the navigation bar by modifying the Site.Master.
The one thing that I have not figured out is how to change the color of the text within the navigation bar? May anyone assist me with this?
Current active page:
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a {
color: #xxxxxx;
}
Current active page (on hover):
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
color: #xxxxxx;
}
Other pages:
.navbar-inverse .navbar-nav > li > a {
color: #xxxxxx;
}
Other pages (on hover):
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
color: #xxxxxx;
}
I have no experience with ASP.NET, but are you just changing the font color with css?
then this should work.
.navbar-inverse {
background-color: #74D6FF;
border-color: #74D6FF;
color: #VALUE;
}
How to change the link's color and font size for the drop down menu when collapsed and NOT change the drop down menu when it is full size?
Here is visually what I'm asking: 1
Here is my present code: http://jsbin.com/bigoxeyuri/edit?css,output
You can see the links in the full size and the collapsed are two different colors - collapsed being the default gray that I want to change.
Thank you.
/*Navbar color full size and collapsed including drop down list*/
.navbar-default {
background-color: #B4A890;
border-color: #B4A890;
}
/*Link color for top links; but not drop down list*/
.navbar-default .navbar-nav > li > a {
color: #f5ebdb;
}
/*Link hover color; full size & collapsed; but not drop downlist*/
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #110a02;
}
/* Drop down menu's Full Size only background color*/
.navbar-nav > li > .dropdown-menu
{ background-color: #ffffff;
font-size: 12px; /*size for full size and collapsed*/
}
/* Link color for drop down list & its rows' hover color for full size menu only*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus
{
color: #f5ebdb;
text-decoration: none;
background-color: #B4A890;
background-image: none;
}
/* Drop down list Title Cell background collapsed & full*/
.dropdown-toggle:active, .open .dropdown-toggle
{
background:#f5ebdb !important;
color:#110a02 !important;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none; /* affects top main links*/
background-color: white; /* ???Change rollover cell color here*/
}
/*???BACKGROUND color for active*/
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
/* 3-bar button - color */
.navbar-toggle {
background-color: #B4A890;
}
/* 3-bar button - stripes */
.navbar-default .navbar-toggle .icon-bar {
background-color: #f5ebdb;
}
/* 3-bar button - color hover */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c2b89f;
}
/* 3-bar button - border */
.navbar-default .navbar-toggle {
border-color: #c2b89f;
}
this is the solution
/* solution */
#media(max-width:768px){
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu>li {
color: #FFF;
font-size: 16px;
}
}
i have updated your code
jsbin
The only time the navbar is collapsed is when the screen is a certain size in pixels. You should look into learning about media rules in CSS to learn more.
#media (max-width: 767px) { //mobile width that collapses the navbar
body {
background-color: blue; //changes the background color to blue
}
}
Here is an example on W3 schools
This changes the color of the dropdown menu and navbar text but not changing the background color of the dropdown menu and navbar
.dropdown-menu li > a
{
color: #7A7A7A;
}
.dropdown-menu > li > a:hover,
dropdown-menu > li > a:focus
{
color: #3399FF;
text-decoration: none;
background-color: #222 !important;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus
{
color: #3377FF;
background-color: #222 !important;
}
in latest bootstrap they put background image on background when i run
background-image:none;
this remove image and color show up.
When a child menu item is active its parent menu should look the same. However, I don't know why, the parent item reacts only to background-color: #83bf17 but not to color: #6B4A38;.
Live example: http://solutionsmvo.nazwa.pl/projekt/kama/lecznica/
CSS:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.current-menu-parent {
color: #6B4A38;
background-color: #83bf17;
}
Edit
Sorry, forgot to mention that !important doesn't work.
You need to target this:
.navbar-default .navbar-nav > li.current-menu-parent > a{
color:#6b4a38;
}
This should work.
Use !important for color like this:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.current-menu-parent {
color: #6B4A38 !important;
background-color: #83bf17;
}
Edit: Try to comment color from the following class
.navbar-default .navbar-nav > li > a {
/* color: #83bf17;*/
display: block;
font-size: 1.25em;
font-weight: 700;
padding: 15px 30px;
text-transform: uppercase;
}
you have a more specific selector which is overriding
.navbar-default .navbar-nav > li > a {
color: #83bf17;
....;
}
so you should delete that in order for the element to inherit the parent's value for the color property
try .current-menu-parent a { you have to target a if it's to receive color. And to target only direct descendant a use .current-menu-parent > a { if there's no elements in between (I checked there is no elements in between).
There's another problem beside not targeting a, you have too specific selector that overrides color even if a is included in selector.
try adding:
a.dropdown-toggle {
color: #6B4A38 !important;
}
I am using flat UI theme with bootstrap 3. The flat UI theme navbar is not working correctly and many are having similar issues with it that have posted on github. So I decided to just use the default BS3 navbar and write my own code (with the help of another stackoverflow thread) to style the menu the way I would like. I am doing this in LESS as an override css.
The problem is I can't figure out how to change the following.
drop down box color
the drop down box link color
drop down box link hover color
Here is the css I am using:
/* navbar */
.navbar-default {
font-size: floor(#component-font-size-base * 1.067); // ~16px
border-radius: #border-radius-large;
border: none;
background-color: #brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #clouds;
}
.navbar-default .navbar-nav > li > a:hover {
color: #clouds;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #clouds;
background-color: #brand-secondary; // Changes color of main button that is currently active.
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #clouds;
background-color: #brand-secondary; // Changes color of main menu button once clicked.
}
/* caret */
.navbar-default .navbar-nav > li > a .caret {
border-top-color: #clouds;
border-bottom-color: #clouds;
color: #clouds;
}
.navbar-default .navbar-nav > li > a:hover .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.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: #555;
border-bottom-color: #555;
}
This produces the correct color bar, bar link, carets, and bar hover effects. But when I click a button with a sub menu, the sub menu still appears in the default BS gray. What classes am I missing to change the drop down sub menu background color, link color, etc?
Thanks
This is the CSS to change the dropdown menu style/color..
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
Demo: http://bootply.com/93475
I would also add this:
.navbar-default .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
In addition to what Skelly said in his response:
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
This is because the latter only changes the background-color when the dropdown is open, but once reverted back, the background-color changes back to the default. You can't witness this by just toggling the dropdown, but if you were to delay the transition of the dropdown, for example by using jQuery below to hover, you can see what I mean.
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
jsFiddle with the above CSS
You can compare the toggle dropdown with the hover one. They both work.
jsFiddle without the above CSS.
The toggle dropdown seems to work, but once you hover and move your mouse away, it'll revert back.
If you're using FireFox or Chrome, can you use their developer tools to check what CSS is being applied to the dropdown box?
For example, what I would do in Chrome is to right-click on the dropdown box background and select "Inspect element". Then check you have the right element selected. Then you should be able to check which CSS styles are applied to that element in the panel to the right side (it has tabs for Styles, Computed, Event Listeners, DOM Breakpoints and Properties in my version of Chrome 30.0.1599.101 m)
I used a BS3 menu generator to create the css code I needed. Was much easier than trying to hunt down the tags I needed to change.