CODEWITHSUNDEEP
jquerycssz-index
Colton McCormack
Colton McCormack

Reputation: 771

z-index not functioning properly on menu, due to jQuery slider

It appears that for some reason my content slider sits "on top" of my navigation menu despite my adjustment of various z-index properties to correct the issue.

The wrapper on my menu is a positionable element and the slider is only setting the content to z-index's of 98 or 99 so I can't quite figure out why setting my menu to a z-index of 999 doesn't work.

I've tried adjusting the various z-indexes via Firebug to no avail.

The site in question currently resides on our test server here: http://www.testflightapparel.com

Upvotes: 0

Views: 2051

Answers (1)

Dexter Huinda
Dexter Huinda

Reputation: 1222

enter image description hereUsually position: absolute; along with z-index works always in my projects with sliders. Do not forget to render the menu after the slider so it is forced to sit on top.

Here is what I did when I edited your HTML in Chrome:

<div class="main">
...
 your slider code
...
</div>

<!--See the added inline styles -->

<div class="wrapper_menu menu_dark_theme" style="position: absolute; margin-top: -1200px; z-index: 9999;">
   <ul class="menu menu_takeflight">...</ul>
</div>

See screen capture attached:

Upvotes: 1

Related Questions