Link to home
Start Free TrialLog in
Avatar of phillystyle123
phillystyle123Flag for United States of America

asked on

bootstrap 3: dropdown-menu opening under content.

Wow. This is a real puzzler.

http://cjehost.com/ncjwla3/

In mobile, click on the search glyphicon at the top of the page to the right of the DONATE button. I'm using dropdown-menu and it's stacked behind the rest of the page content. I've tried so many threads that suggest using z-index  but it doesn't seem to matter if I apply z-index:9999 to the dropdown-menu container and z-index:1 to what's below it, the dropdown-menu is still hiding behind the content below.

Currently, I've got <div class="navbar navbar-default navbar-static-top" style="position:relative;z-index:99999;"> (line 114)
and
<div id="page" class="hfeed site" style="position:relative;z-index:888;"> (line 145).

I've tried these combos all over the place -same result.

I need the search box contained inside the dropdown-menu div to appear over the logo (and then I'm going to try to stretch it to 100% width.)
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

update: added position:fixed to line 115:

<div id="menu-item-131" class="menu-item-131 dropdown" style="background:tan;position:fixed;width:25px;height:25px;left:100px;top:10px;z-index:9999;">

and the dropdown-menu is now stacked properly (on top of everything else). But, it doesn't work in IOS (I'm using 8, but I think it's the same for the other operating systems). Is there a workaround?
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
dude-perfecto! thanks so much -was banging my head against the wall for hours with this one.