CODEWITHSUNDEEP
htmlcssresponsive-design
Ahmar Ali
Ahmar Ali

Reputation: 1068

z-index not working in responsive menu

I have two separate menus for mobile and desktop sites.I have added a very high z-index to this nested menu but it still hides behind other elements and is not displayed at the top. So how do we make this at top of all other elements. Here is sample of layout:

<nav id="responsive_main_menu">
<div id="navigate-to">Navigate to</div>
                        <ul id="menu-main-menu-1" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home alpha"><a href="#"><span>Home</span></a></li>
</ul>

Here is the CSS:

#responsive_main_menu .menu,#responsive_main_menu .menu ul {

z-index: 999999;
}

Here is the url showing this problem. Resize the page to smaller version to see the blue menu.http://daccordinc.com/

Upvotes: 1

Views: 5725

Answers (3)

Adrift
Adrift

Reputation: 59799

You need to apply a position property other than the default value, static in order to change the stacking context of an element. Add relative positioning to the below selector:

#responsive_main_menu {
    position: relative;
    z-index: 999999;
}

http://img836.imageshack.us/img836/1389/wgyj.jpg

Upvotes: 3

gustavohenke
gustavohenke

Reputation: 41440

z-index needs position to be different than static (which is the default) to work.
Try relative, it'll work:

#responsive_main_menu .menu, #responsive_main_menu .menu ul {
  z-index: 999999;
  position: relative;
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

z-index won't work if you don't have any position declared

I added position: relative; there and see the difference now

enter image description here

Upvotes: 2

Related Questions