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 this issue by removing transform: translateY(50%); property.

Answer 2

This will fix it

.navbar .nav > li {
z-index: 10000;
}

Answer 3

Just give

position: relative; 
z-index: 999;

to the navbar

Answer 4

Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.

Answer 5

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.

Answer 6

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.