I'm hoping someone can take a minute and look at my responsive web page and let me know what CSS rule I need to write to keep the boxes in the collapsed state of the menu from turning completely white on hover. I can't see my white txt links underneath. I tried this rule and it didn't work:
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a:hover {
text-decoration:none;
}
If you resize your browser until the top nav collapses, you will see what I mean when you open the collapsed menu and hover.
Page I'm creating is here:
Using tw bootstrap - Any help would be greatly appreciated.
Thanks
You need to override the style for the appropriate media query. To only target the menu when it's collapsed, you can do:
#media (max-width: 979px) {
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
background-color: transparent;
{
}
Or if you want to apply it universally to all resolutions:
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
background-color: transparent;
{
Add the line:
background-color: transparent;
To the rule:
.navbar .nav > li > a:hover { ... }
.. which is on line 43 of your "main .css" (why is there a space after main and before the file ext?)
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;
}
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.
I've got a strange issue with IE7 and IE8 where drop-down menu items jump around when hovered over - some negative margin rules are being applied on hover on the top level menu items which are cascading down to sub-menu items. Basically the drop-down menu is overriding some of the styles from Twitter bootstrap, which is included before the app.css applies custom styles.
This code is the culprit and I can't seem to override it without losing the styling on the top level items that I need:
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav li.dropdown.open > .dropdown-toggle {
height: 12px;
margin-top: -10px;
padding-top: 10px;
}
Here is a [demo link][1] (only the dropout menu styling is the issue at the moment, I realise the top level items aren't very legible!)
Just change the rule to this (basically add the descendent selector under .nav):
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav > li.dropdown.open > .dropdown-toggle {
height: 12px;
margin-top: -10px;
padding-top: 10px;
}
i.e.
.navbar .nav li.dropdown.open > .dropdown-toggle {
becomes:
.navbar .nav > li.dropdown.open > .dropdown-toggle {