Search code examples
jqueryhtmlcsslayerwowslider

Overlay / login window over animated wowslider layering

I'm using wowslider on my welcome page which works fine and looks the way it's supposed to. When people click "Enter" (top right button) a 50% transparent overlay and on top a login window appears. Unfortunately the wowslider dominates the layering and even though I gave my login form a z-index of 10000, the wowslider is still on top. I tried many things with changing z-index of wow-slider elements, playing around with overflow properties and position properties of all related elements, but I can't find a solution.

I believe it's the easiest if I give you the link to the development version of the project to see the issue and perhaps find a solution. http://dev.hobbyathletes.com/

Here are the relevant wowslider elements

<div id="wowslider-container1">
 <h1>Community for hobby and amateur endurance athletes</h1>
  <div class="ws_images">

This ws_images div element seems to dominate all layering rules but the h1 element displayes also on top of the ws_images element, but if I give wowslider-container1 div a border I can see it's behind my login form

Any help would be very much appreciated. Please try to avoid a solution where I'm supposed to embed the wowslider in an iframe.

Thanks in advance

Solution

  • Add z-index to your #form_center selector as below which is ha_main.css - Line 707

    #form_center {
position: fixed;
width: 0;
height: 100%;
left: 50%;
top: 0px;
z-index: 10000;
}