I need help with bootstrap navbar collapse. When I click the burger menu, there is less than a second lag before it fully expands. Also, if you click very fast, like multiple clicks on the burger icon, the x icon animation gets delayed, and the x becomes the closed icon rather than the burger icons, which is frustrating because I like to have a bit of delay with my nav collapse. please check my link below for a live version :
My website link
So basically I added ul to the nav-collapse so now its .navbar-collapse ul { height: 100vh; } so the solution is to set the height of the ul to 100vh, not the height of the whole navbar-collapse.
Related
Superfish navbars are great, but when you are looking at the rightmost tab, the second tier navbar starts at the far left. So if there are only a few tabs, it looks off-center and the user has to mouse all the way to the left. How can you center the tabs inside the superfish navbar?
Never mind, found the appropriate line to change in the css:
.sf-navbar > li > ul > li {
float: left;
}
I have a navbar build with Twitter Bootstrap 3.1.1. When on an iPhone or iPad the dropdown menu hides behind the slider image. It has a position absolute and a z-index of 1000.
When on a desktop it goes well, it goes over de slider images.
If you go to http://sitegeregeld.nl/. You see that the dropdown menu disappears behind the slider on the homepage on an iPad and iPhone. I don't see a sollution.
What goes wrong?
I was having the same problem(only hiding behind content on ipad), and this solved it:
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
I'm using a bootstrap/wordpress framework that has it's own css style sheet that sets the navbar to position: relative.
found answer here: z-index issue with twitter bootstrap dropdown menu
Site URL: http://scc.maxworks.org/wo-wp0001/
I needed to get the search box into the nav menu at the top of the site, which I did (it's a div inside an unordered list) and it places where i want it to when on a computer screen. now i'm trying to get it to behave as I would like to when on a tablet or phone - which is that I'd like to to align to the left side of the screen when you click the menu icon to open the list. (Actually i'd like the search box to appear next to the menu icon but i think thats beyond my skill to do at this time. So i'm trying to align it to the left when in the smaller views.
I am using bootstrap.
in bootstrapwp.css
find
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
padding: 0 0 0 380px;
}
remove padding
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
}
I think you want to check this out. You could use the Responsive utility classes. So put 2 searchboxes in and hide on the not wanted resolution. Might be not the ultra super best way but it works and it is quick.
There might be some fancy js way to accomplish this, can't help you there.
In my menu I use overflow:hidden and menu width to display my menu and hide text if the screen size becomes smaller. However it hides also the submenu at the same time
By submenu I mean the menu of level > 2
So if I hover an item in the menu bar, I can get the menu display but if that menu contains some subitems then they won't display at all. But when I delete overflow:hidden in my css that is being applied for ul/li elements to create the menu, they show up but the text looks ugly especially if it is longer than the menu width
I think using this should work:
ul{
overflow:visible;
}
ul.li{
overflow:hidden;
}
ul.li.ul{
overflow:visible;
}
ul.li.ul.li{
overflow:hidden;
}
Of course you will have to apply it to your own stylesheet. I am not totaly sure this will work, becouse i cant see your code/stylesheet from here.
I am not sure of how to get this to work, I have a Drop Down Menu that is cross browser compatible and I am trying to have the selected "bread crumb" menus system keep the arrows on the :hover style when I am on child menus. As you can see from the link here:
http://www.seth-duncan.com/Test/TestMenu.html
When I go to child menu items the menu reverts back to the blue arrows, when I need them to keep the hover style white arrows.
Any help ?
Thanks
Move
background:#A5CF8C url(images/DownArrow.png) no-repeat scroll right center;
from
#menu li a.sub:hover
to
#menu li:hover a.sub