There's a collapsed navbar on this website
The background color of the tabs is white, and I want to change it. I tried this code in CSS:
#media (max-width: 767px) {
.nav-collapse
{
background-color: red;
}
}
And it sort of works, it adds red lines under each tab, but it does not change the background color.
You can see what it does if you visit the site on mobile and click the navbar to collapse it.
I'm trying to change this only for MOBILE.
I'm sure there's an easy solution to this, but I can't figure it out.
Can someone help?
it is because your grey background is set on anchors and not on NAV it self
if you do this:
.header ul.nav li a {
background: red;
}
it will work..
I just checked again and you have background added to 3 elements you have red on your outer wrapper, you have white added to list element and grey on your anchors
Basically in your html there is inline style either remove that or change there the color or if you wanted that to change through css use following code:
.nav-collapse ul li { backgroud-color: red !important; }
Inline style Refrence Image
Related
I want to keep the text in the Get Quote Button white on downward scrolling. Currently, it changes to grey along with the other navbar font. I need to isolate this button text using custom CSS so it is white at all times, but does not affect navbar menu text.
This is the code I am currently using for the menu font color.
.menu-transparent .navbar .nav>li>a {
color: #fff;}
Add this style.
.menu-transparent .navbar-fixed-top.navbar.top-nav-collapse .nav > li.getquote > a { color: #fff !important;}
i have a issue with menu that i cant change text color in mini fixed meni in this site
I tryed to add this CSS to custom CSS:
.classic-menu .menu-item a {
color: #000;
}
but when set color to #000 then color in main menu is turn black. So i want color in main menu to be white in black background, and in mini fixed menu when scroll down, to be white background with black font color. How to do this?
Thanks.
Do this in your CSS:
.classic-menu .menu-item a {
color: #fff;
}
.mini .menu-item a {
color: #000;
}
.classic-menu is basically the regular state of your menu (when the background is black)
.mini-active is basically when the mini menu is activated, this way you'll get black for the mini menu and white for the regular one.
Hope that helps!
Try this
write this code for your main menu, I think this is your main menu class
.classic-menu .menu-item a
{
background-color:#000;
color:#fff;
}
write this code for your sticky menu or scroll menu class, i don't know your scroll menu class
{
background-color:#fff;
color:#000;
}
to override this class use !important
The Inspinia AngularJS framework has a demo here for those who don't use it.
For the life of me, I cannot see how to change the background colour of the navigation menu on the left. It should be simple, but I just can't find it, even using the Chrome developer console.
[Update] I want to change the color programmatically from AngularJS, what's the best way to do that? Maybe add an Id to the background div?
Make some changes, according to the images below:
I hope to have helped in some way
i guess this will help u
body{
background-color: #F44336;
}
.nav-header{
background-color: #F44336;
background-image: none;
}
.nav > li.active{
background: #c7635b;
}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus{
background-color: red;
}
.nav-header and other elements in your sidebar use background-image and those images are opaque, not showing the background color. You need to check (and reset) background-image property of items in your sidebar for this.
Example:
.nav-header {
background-image: unset;
}
#side-menu {
background-color: #933;
}
.nav > li.active {
background-color: #833;
}
Keep inspecting your elements until you find what rule sets the backgorund-image, background-color or background (shorthand) for the element, copy the selector of the currently applying rule and place it in your own stylesheet, changing the value of the property. Make sure you load it after the rest of your stylesheets.
There is no background-color defined in sidebar, its the background-color of body, and the middle content section has light grey bg color, so change the body-color and sidebar color will be changed.
I am using bootstrap's dropdown from a navigation div, and I'd like to change the color of the the sub-menu links on hover. Nothing I'm attempting works, and I can't make sense of it. It's not having any effect even when trying to run things from the chrome console.
I have created a css file where I override the defaults. The background change for normal a tags work, but the hover doesn't. Why is that? I also tried affecting the li and using !important, but none of that is having any effect.
I'm using Bootstrap 3.1.1. Here's my css:
.dropdown-menu > li > a {
color: white; /* This has an effect */
}
.dropdown-menu > li > a:hover {
background-color: red; /* This doesn't... why? */
}
And check out this jsfiddle too for a demonstration (for some reason you need to drag the result panel a whole lot to the left before you see the button). Any ideas?
edit
Note I am trying to change the background color for the links in the dropdown, not for the main button which is MyProfile.
Bootstrap defines a background image for the elements to override some clashes in their media queries. Remove the image to use a simple fill color.
You can redefine your hover as follows:
.dropdown-menu > li > a:hover {
background-image: none;
background-color: red;
}
http://jsfiddle.net/sW7Dh/4/
Say I have a div for the main body text of a webpage, and a navigation div for links to the rest of the website. Now say I want the links in the body text to be green instead of the usual blue, but I want the links in the navigation div to be yet another color, perhaps red. If I make links green in CSS, then all the links will be green. If I make the text in the navigation div red with CSS, the link attributes seem to override the div's attributes for links in the navigation div. How can I target only certain links when no links have any classes attached to them?
Because of CSS specificity (I love that word) rules, JMC's suggestion works.
Read more about that here:
http://htmldog.com/guides/cssadvanced/specificity/
Basically, the more specific the rule is, the more likely it is to be used.
Use descendant selectors.
Style regular links, then only links within the #nav div:
a:link { color: blue;
}
a:visited { color: purple;
}
.navigation a:link, .navigation a:visited { color: green
}