Search code examples
jquerycssparallax

Fixed Header disappears over parallax image

I have this website here http://new.sekanskin.com/what-we-do/ and as you can see I have multiple parallax images and a fixed nav bar, When I start scrolling I see that the fixed nav bar does not go over the parallax, but behind it.

I have tried adding a z-index to nav bar as I had to add a z-index to the parallax image to get it appear, but adding the z-index to the nav bar did nothing.

CSS

.parallax-window, .parallax-window-2, .parallax-window-3, .parallax-window-4, .parallax-window-5, .parallax-window-6, .parallax-window-7{
    min-height: 600px;
    background: transparent;
}

.parallax-mirror {
    z-index:10000 !important;
}

.eltdf-page-header .eltdf-fixed-wrapper.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-backface-visibility: hidden;
    z-index:100000 !important;
}
Solution

  • You need to set position of divs. Add below css in your style.css

    .eltdf-side-menu-slide-from-right .eltdf-wrapper, .eltdf-content {
    position: inherit !important;
}

.eltdf-page-header {
    z-index: 11000 !important;
}