z-index issue with twitter bootstrap dropdown menu
Drop Down-MenuTwitter BootstrapZ IndexDrop Down-Menu Problem Overview
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative
(like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index
of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed;
OR z-index: -1;
-but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Drop Down-Menu Solutions
Solution 1 - Drop Down-Menu
Just realized what's going on.
I had the navbar inside a header which was position: fixed
;
Changed the z-index
on the header and it's working now - guess I didn't look high enough up the containers to set the z-index
initially !#@!?
Thanks.
Solution 2 - Drop Down-Menu
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Solution 3 - Drop Down-Menu
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
Solution 4 - Drop Down-Menu
This will fix it
.navbar .nav > li {
z-index: 10000;
}
Solution 5 - Drop Down-Menu
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Solution 6 - Drop Down-Menu
In my case in addition to z-index
I had to set overflow: visible
in parents elements
Solution 7 - Drop Down-Menu
Solved by removing the -webkit-transform
from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Solution 8 - Drop Down-Menu
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solution 9 - Drop Down-Menu
Just give
position: relative;
z-index: 999;
to the navbar
Solution 10 - Drop Down-Menu
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solution 11 - Drop Down-Menu
Solved this issue by removing transform: translateY(50%);
property.
Solution 12 - Drop Down-Menu
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
Solution 13 - Drop Down-Menu
I had the same problem, in my case because i forgot this in my NavBar style: overflow: hidden;