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 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

User · Answer

Just give position  relative   z-index  999   to the navbar

User · Answer

Solved by removing the -webkit-transform from the navbar   -webkit-transform  translate3d 0  0  0    pillaged from https   stackoverflow com a 12653766 391925

User · Answer

This will fix it   navbar  nav  gt  li   z-index  10000

User · Answer

IE 7 on windows8 with bootstrap 3 0 0     navbar     position  static     navbar  nav  gt  li     z-index  1001      fixed

User · Answer

This worked for me    dropdown   dropdown-menu     z-index 2     navbar     position  static    z-index  1

User · Answer

This fixed it for me    navbar-wrapper     z-index  11

User · Answer

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

User · Answer

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

User · Answer

Solved this issue by removing transform  translateY 50    property

User · Answer

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

User · Answer

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

User · Answer

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

[drop-down-menu] z-index issue with twitter bootstrap dropdown menu

Examples related to drop-down-menu

Examples related to twitter-bootstrap

Examples related to z-index