[Resolved] generatepress header z-index above lightbox

[Q]

Hi,

I have created a full screen slider with the generate press merged header on top for my homepage.

The issue I have, when I click on my play button in my slider a lightbox with a vimeo video appears. I can’t seem to close the lightbox when I click on the close icon [x]. I can only seem to click on my mobile menu which is quite close to the close icon.

Would it be possible to get the lightbox to be on top of the generate press header when I click the play button?

I was messing around with the z-index on the CSS for the generate press header, but only when I make the generate press header appear does the lightbox close icon work.

Here is the CSS I was working with.

.generate-combined-header {
position: absolute;
width: 100%;
z-index: 1000;
}

Thanks
Q

[Tom]

Maybe something like this would work:

.master-slider-parent {
    position: relative;
    z-index: 10001;
}

[Q]

Hi Tom,

The CSS you gave me allows the main slider to go on top of the generatepress header, I want to be able to keep the generatepress header on top of the slider.

Would it be possible to be able to get the lightbox (when clicked from play button on slider) on top of the generatepress slider.

This the CSS I found for the lightbox with video in it.

.ms-slide .ms-slide-video {
position: absolute;
top: 0;
z-index: 111;
background: black;
padding: 0;
margin: 0;
border: none;
}

If that is not possible, would it be possible to get the close icon [x] above the generatepresss header. Here is the CSS I found for the close icon.

.ms-skin-contrast .ms-slide .ms-slide-vcbtn {
width: 24px;
height: 24px;
background: url(skins/contrast-skin.png) no-repeat -27px -30px;
top: 30px;
right: 50px;
}

Thanks
Q

[Tom]

I just went to give it another shot, and it looks like you were able to get the lightbox above the header? Looks good!

[Q]

Hi Tom,

Sorry for the late reply. I am still having issues with this.

What I have created is just a stop gap.

I will replicate the earlier issue and get back to you.

Thanks for all your help Tom

[Tom]

Sounds good, I’ll be here 🙂

[Q]

Hi Tom,

I just changed the slider, and that sorted the issue.

Thanks again for all your help, much appreciated.

Regards
Q

[Tom]

Glad you got it working 🙂

[Author]

Posts