Site logo

Archived topic

Video Header/Hero is Covering up Navigation

2 replies · Started by Mark on August 17, 2020

Viewing posts 1–3 of 3

Hey all, can you help me figure this out? I followed the guide to put in a video background in the header/hero and it is hiding my navigation. I want the navigation to merge with content and overlay the video with transparency. Check it out at https://www.missionstory.org/

Nevermind I got it. For those who also have this problem, it's in the CSS.

Remove overflow: hidden; from the below code.

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}

.page-hero {
    position: relative;
    overflow: hidden;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Glad you've figured out :)

This archived topic is closed to new replies.