Video instead displays under sticky header

Hey Julie,

Thank you for the inquiry.

Looks like you are using a different lightbox plugin for the videos instead of the default lightbox option from the theme. The #header covers the video because the lightbox container is directly appended to the vimeography-gallery container, which is located within the #main container. Since the #header is sticky, it has a higher z-index than the #main container, which also means that it is higher in the stack order compare to the #main container. To fix the issue, you have to set the lightbox plugin to append the lightbox container to the parent #wrap_all container so that we can set the z-index value of the vimeography-gallery lightbox container accordingly.

If you want to learn more about z-index or the stacking context in a webpage, please check this documentation.

// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Best regards,
Ismael

Hi,
Thanks for the link to your site, I see that you have this css:

#top .av-submenu-container.av-sticky-submenu {
    z-index: 2;
}

unfortunately it needs the !important; to work so please change to:

#top .av-submenu-container.av-sticky-submenu {
    z-index: 2 !important;
}

we will need to apply z-index to the flex column that has the video link because it becomes the parent of the modal, and we also need to apply z-index to the container after the submenu for the modal to be on top of it, so please try this css:

.flex_column.avia-builder-el-2 {
	z-index: 2;
	position: relative;
}

.template-page.content {
	z-index: 3;
	position: relative;
}
#top .av-submenu-container.av-sticky-submenu {
    z-index: 2 !important;
}

please note the first css rule is .flex_column.avia-builder-el-2 but it would be better if you added a custom class to the column that has the video link, but this should work for now so you can test. I’m not sure if the z-index for the container after the submenu will be an issue for other pages, so please check and if it is we can adjust the classes. Are you going to use this over your whole site or just a couple of pages, the more we can limit it to certain pages the less it could cause issues on pages where it is not needed.
After applying the css, please clear your browser cache and check.
Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike