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.

See my answer at http://stackoverflow.com/questions/16149701/bootstrap-dropdowns-menus-appearing-behind-other-elements-ie7/36063349#36063349 — tiago, Mar 17 '16 at 14:27

score 60 · Answer 1 · edited Feb 09 '16 at 06:24

60

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.

edited Feb 09 '16 at 06:24

Arnaud

7,259
10
50
71

answered Dec 17 '12 at 14:52

Leon

1,793
2
18
20

16

I had a similar issue that turned out to caused by "overflow: hidden" on a parent div. The solution was easy for me since, after reviewing it, I determined that I didn't need the overflow: hidden anymore so I removed it. – Scott Forsyth May 21 '13 at 13:46
2

@ScottForsyth-MVP I skimmed past your comment thinking.. overflow:hidden - that's not my issue - mine is all about z-index. So I went to the MDN page on stacking contexts (highly recommend) and went through my site meticulously setting positions and correct z-indices. Still the menu was being cut off. Then I noticed overflow:hidden in the css inspector and it reminded me of your comment - and that was it! – Julian Mann Dec 02 '15 at 16:11
Although I have a slightly different structure in the DOM and elements, what made the solution for me in the end was changing the z-index of the element that contained the dropdown element(s). Thanks! – TheCuBeMan Jun 28 '16 at 08:32
1

@ScottForsyth-MVP Thanks! your comment saved my live :D – ikhsan Feb 23 '19 at 20:33

score 16 · Answer 2 · answered Sep 18 '13 at 13:41

16

IE 7 on windows8 with bootstrap 3.0.0.

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

fixed

answered Sep 18 '13 at 13:41

Primož Klemenšek

171
1
4

score 10 · Answer 3 · edited Jan 23 '14 at 09:37

10

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.

edited Jan 23 '14 at 09:37

Johanna Larsson

10,531
6
39
50

answered Sep 11 '13 at 09:18

rdoll

101
1
2

Worked for me, no side effects. – Ulises Layera Jan 13 '14 at 13:30

score 6 · Answer 4 · edited Mar 22 '13 at 10:55

6

This will fix it

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

edited Mar 22 '13 at 10:55

Ram kiran Pachigolla

20,897
15
57
78

answered Mar 22 '13 at 10:34

parkerproject

2,138
1
17
14

4

This will cause problems with bootstrap modal dialogs, as modal-backdrop's z-index value is lower. – Denys Vuika Nov 13 '13 at 12:48

score 4 · Answer 5 · answered Apr 28 '21 at 07:57

4

In my case in addition to z-index I had to set overflow: visible in parents elements

answered Apr 28 '21 at 07:57

crg

4,284
2
29
57

score 3 · Answer 6 · answered Mar 26 '14 at 16:58

3

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.

answered Mar 26 '14 at 16:58

Fernando Vieira

3,177
29
26

score 2 · Answer 7 · edited May 23 '17 at 12:25

2

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

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

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

edited May 23 '17 at 12:25

Community

1
1

answered May 28 '13 at 16:38

Luke Ollett

316
2
16

score 2 · Answer 8 · answered Aug 24 '13 at 14:02

2

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

answered Aug 24 '13 at 14:02

Thomas Decaux

21,738
2
113
124

I just increased .dropdown-menu z-index to 1001. The solution is to increase this value. Sorry for my bad english ^^ – Thomas Decaux Aug 24 '13 at 15:35
ahh .. then I misunderstood you, sorry. You might consider a slight clarification in your answer (like you did in your comment :-) – kleopatra Aug 24 '13 at 16:12

score 2 · Answer 9 · answered Aug 13 '20 at 07:35

2

Just give

position: relative; 
z-index: 999;

to the navbar

answered Aug 13 '20 at 07:35

Dilmurod Ismoilov

55
8

1

This works for me but you don't need to set the z-index property to 999. You can set it to 2. – Marco Concas Apr 07 '21 at 14:30

score 1 · Answer 10 · answered Sep 09 '13 at 12:25

1

This fixed it for me:

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

answered Sep 09 '13 at 12:25

JochenJung

7,183
12
64
113

score 1 · Answer 11 · answered Dec 26 '16 at 09:50

1

Solved this issue by removing transform: translateY(50%); property.

answered Dec 26 '16 at 09:50

kabangi julius

2,709
2
16
25

score 0 · Answer 12 · answered Apr 10 '15 at 13:29

0

This worked for me:

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

answered Apr 10 '15 at 13:29

dessalines

6,352
5
42
59

score 0 · Answer 13 · answered Aug 15 '20 at 02:14

0

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

answered Aug 15 '20 at 02:14

Vanderley Maia

465
5
7

score 0 · Answer 14 · answered Jul 27 '22 at 19:09

I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.

Did not work:

$(document).ready(function () {
        var table = $('#order').DataTable({
            fixedColumns: true,
            fixedHeader: true, ...

Did work:

$(document).ready(function () {
            var table = $('#order').DataTable({
                fixedHeader: true, ...

score 0 · Answer 15 · answered Feb 10 '23 at 16:00

I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.

https://github.com/twbs/bootstrap/issues/31747

This was my scenario and the other answers here that referenced position: sticky put me onto it.

score 0 · Answer 16 · answered Feb 12 '23 at 21:21

0

In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.

answered Feb 12 '23 at 21:21

Allen Ellis

269
2
9

z-index issue with twitter bootstrap dropdown menu

16 Answers16

Linked