Bootstrap navbar dropdown hidden behind grid content

Question

I have looked up this problem and the solutions mentioned in other posts did not work for me.

What is happening: My dropdown on the navbar is being hidden behind an image, but only when the image is in Bootstrap grids. If I remove the grid and just use a div row element, the dropdown appears over the image. All the fixes I found were using z-index, which I tried but for some reason putting the z-index of the navbar, dropdown, li elements did not fix this problem.

This is a link to the HTML with the problem: http://ratchetmedia.com/bootstrap/ Hover over "Something2" on the navbar to see the dropdown. Tested and problem exists in IE and Chrome for me.

I really need to use the grid under the navbar in a few cases, otherwise I would have just done the job another way.

Thank you for your time and any input is greatly appreciated!

Just add z-index: 1 and position: relative on .headercontainer — Zlatin Hristov, Dec 23 '15 at 21:59

score 0 · Accepted Answer · answered Dec 23 '15 at 21:59

0

You have to set a position on .headercontainer for z-index to work. Just add these rules to the class.

position: relative;
z-index: 1;

answered Dec 23 '15 at 21:59

Marie

2,114
1
17
31

Thanks, that fixed it! I really appreciate the quick reply! – chrisr747 Dec 23 '15 at 22:04

Bootstrap navbar dropdown hidden behind grid content

1 Answers1