UPDATE: For clarity, I added the yellow background color to see what "shows through" or is "transparent"
I can't seem to figure out how to keep the same styling in this nav bar, but make the background color white, not transparent. I'd also like to get rid of the transparency between each of the drop down menu items.
http://jsfiddle.net/trevoray/VZ7qD/20/
Any help would be greatly appreciated!
Trevor
.nav {
border-radius:4px;
box-shadow: 0 3px 4px #8b8b8b;
}
You need to set background-color in following CSS class
.nav > li
{
background-color:white;
}
JS Fiddle Example
Related
I have this website I'm working on. Bear in mind I'm not a professional.
Id like to CSS style the font colour, whilst hovering, in the submenus.
Any clues how to do this?
Cheers,
Matt
https://willcruickshank.net/new/
Currently, this is the CSS that controls the hover color of the font in the sub-menu:
.mn-sub li a.active{
background: rgba(255,255,255, .09);
color: #f5f5f5 !important;
}
You can change the color on hover to something else by just swapping out the #f5f5f5 with any other color hex code. To make it blue (#0000FF), for example:
.mn-sub li a.active{
background: rgba(255,255,255, .09);
color: #0000FF !important;
}
Goodluck!
In your css file, with the class name given to your submenu items, you can define parameters for on hover:
.mn-sub li a:hover {
color: red;
}
I'm trying to change the hover color of my sub-menu in the top navigation of my site but nothing seems to work. It appears to be picking up the grey color used in my footer but nowhere else as the hover color. This is the code I've been using to get it to work:
.navbar-inverse .dropdown-menu, a:hover {
color: #cc3300;
border-bottom-color: #cc3300;
border-bottom-width: 5px;
}
It could be something else in my other navbar and dropdown menu css codes that's overwriting it but I can't figure out where it is. Theoretically, this should work but it doesn't.
Any suggestions?
partyfavorz.com
Here this should help, you need to add the "!" tag as shown below for background and color:
.navbar-inverse .dropdown-menu a:hover {
background: #CC3300 !important;
color: #fff !important; }
Best regards! Edited to change the hover to red and keep the font to white.
I cant for the life of me figure out how to style the bootstrap dropdown menus using CSS.
I can manage to get the background color to change but that's it. The links don't have an underline and the Hover background colour does not change. I haven't even started with the down arrows yet either!! Any advice?
Heres the code im trying:
#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}
Hopefully this helps.
ul.dropdown-menu {
border-bottom: 5px solid #CCC;
}
.dropdown-menu li:hover {
text-decoration: underline;
}
I was a little confused what you wanted to do with the background-color of the list items in your dropdown menu. Here's an example of one way to change the background color when hovering over each link. Using !important after a CSS attribute might help in some circumstances when you want to override any subsequent rules (but it might not be the BEST way to do this).
I recommend opening up your Chrome dev tools and playing around a bit until you get the desired results. I'm assuming you want to change the background-color of your list items when hovering to a different color than what you specified (#273961) since it is already that color to begin with?
.dropdown-menu li a:hover {
background-color: red !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.