I'm pretty much losing my mind over this. I have a bootstrap navbar which i like to style colors and etc myself. so I changed the link colors of the dropdown menu navbar using this code
.navbar .navbar-nav .dropdown-menu li a {
color:white;
}
it works fine so if i have menu item such as
Menu Item
sub menu item
sub menu item turns to color white.
now the problem starts here.
If i make the screen smaller to collapse the navigation bar. dropdown-menu link colors stay as the default so i figured bootstrap is using a media query for that and no matter what i tried it didn't work. same technique won't work.
#media (max-width:767px){
.navbar .navbar-nav .dropdown-menu li a {
color:red;
}
}
any help is greatly appreciated. I can do this using jquery but i really want to use css for this.
Answer to the question was that you have to target your classes after their breakpoints, I understand bootstrap having different classes in their breakpoints but having a different color and background colors on li elements can be very annyoing. so use a #media query to target whatever class is desired at that breakpoint
Related
I have a very simple page with the standard bootstrap nav which collapses when on small screen. Right below the nav I have a div which I do not want to show if the li has CSS class dropdown open. Is it possible to do this via CSS only or do I have to go down the jQuery/Javascript route?
.navbar-nav > li.dropdown.open {
/*How can I hide the div class="inner-details" here*/
}
If the dropdown element is not wrapped with another one, you could possibly use the adjecent sibling selector like this:
li.dropdown.open + .inner-details {
display: none;
}
Otherwise you could do tricks with negative margin and z-index, effectively sliding content from below the dropdown behind it, but really this will lead to messy layout.
There's no evil in using JavaScript. Bootstrap itself uses it for the navigation if I remember correctly.
I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.
You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}
Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly
I'm making a reusable toggle sidebar menu and cannot for the life of me get this glyphicon to be anchored to the left of the menu so it is always visible. Right now it looks like the first image in the album.
I'm using a template so I'm pretty sure that it's just some little css thing I haven't messed with, but my instructor was unable to fix it as well :O
When the menu is toggled, it looks like the second image. I would obviously like the glyphicon to be visible, showing that it can be toggled out again.
And I have one slightly other bad problem (the third image):
When the menu is toggled closed, there is a scrollbar across the bottom >.<
Here is a link to my html/js and css on JSFiddle
And the JS I use for toggling
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
I've created an update JsFiddle with it working here
It was the text-indent property and display block causing the issue.
I have changed your CSS to:
.sidebar-nav li a {
text-decoration: none;
color: #999999;
}
.sidebar-nav li.link a {
text-indent: 20px;
display: block;
}
I have an odd problem with links on the following site in iOS:
http://www.bllink.net/aircraftindex.asp
Under the "Galleries" menu, tapping the links under the sub-menus (e.g. "Benny") does nothing. It looks as if Safari is going to navigate to the new page, but then it doesn't.
If you tap and hold, you have the option to open the link in a new tab, as expected, however.
Naturally, the site works fine on desktops.
The DIVs holding the links are NOT set to position:fixed, but to absolute.
Any ideas?
Get rid of javascript and use CSS to accomplish a dropdown menu.
This will keep your code much neater and easier to read and your website will be compatible with browsers that have javascript turned off.
You can do this by using the :hover selector in css.
1) So make a list with your menu items or a div containing divs.
2) Hide the submenu's in css by adding: display: none;
3) Use the hover selector to show them on hover. for example:
.menu .menubutton .submenubutton{
/* selects the div or li within the class menubutton within the class menu */
display: none; } .menu .menubutton:hover .submenubutton{
/* uses the hover selector on the menubutton, then shows the submenu it contains */
display: block; }
for an indepth explaination see this article on csswizardry or google for "css dropdown menu":
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Can someone please provide insight into how I can replicate the functionality shown in this example.
Specifically, the navigation bar (first tab) > Watches. The user can hover over the link and a full screen width dropdown is displayed and hides after either when a user clicks on a link or mouses out. I am creating a similar menu type drop-down and need this to function across all platforms and browsers, including ie7.
Appreciate the insight.
Nothing terribly fancy there, or that would require modern browsers, just using typical :hover psuedo-class to show the the menus, which are initially hidden.
There is a wrapper #navigation that sets position: relative (this allows children to be absolutely positioned relative to it). Then there is a <nav> tag inside there used to center. Then inside of that is a ul.level-1 with li's that are display: inline which are the main menu items. Then within those are the menus you are fond of, which are absolutely positioned down a bit and are 100% width.
Then the bit that displays the menu:
// level two menu hidden by default
div.level-2 {
display: none;
}
// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
display: block;
}