z-index issue with twitter bootstrap dropdown menu

Question

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 behi

Answer 1

Solved by removing the -webkit-transform from the navbar:

-webkit-transform: translate3d(0, 0, 0);

pillaged from https://stackoverflow.com/a/12653766/391925

Answer 2

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.

Answer 3

This fixed it for me:

.navbar-wrapper {
  z-index: 11;
}

Answer 4

I had the same problem, in my case because i forgot this in my NavBar style: overflow: hidden;

Answer 5

IE 7 on windows8 with bootstrap 3.0.0.

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

fixed

Answer 6

This worked for me:

.dropdown, .dropdown-menu {
  z-index:2;
}
.navbar {
  position: static;
  z-index: 1;
}