Fullscreen elements video

Hi there,

the Header Element can be set to full height - but only if it is set to merged with the Site Header.

You can apply some CSS to do it:

/* Desktop */
.full-height-hero {
    min-height: calc(100vh - 100px);
}
/* Mobile */
@media (max-width: 768px) {
    .full-height-hero {
        min-height: calc(100vh - 60px);
    }
}

Adjust the -100px and the -60px to match the height of your Site header.

Then add the Element Class of full-height-hero to your header element.

Thanks David, but on my site I'm using the Mega Menu above the header element and I think these can't / should be merged? So than it's not possible?

The CSS I provided should work with the mega menu or the standard navigation.
You don't have to set the Site Header to merged for it to work.

Ah ok, I see how it is working! But I've one question: on the rotary-site the video resizes when changing the screen-size so that it's always fullscreen. Is that also possible? Now, when I resize the window to make it smaller the video becomes a lot smaller in height.

Thx!

Edited the code above ( i was being stupid lol )

Yes! That did it, thx man ;-)

You're welcome