Translucent header that overlays on top of hero

[RevealHM]

Is it possible to have our header be transparent and overlay over our hero image?

We want it to look like this:

We are using slider revolution for our hero image.

The other option I thought would work would be to put the hero video in the header builder. I started playing around with it on the header called “practice header” but could not figure it out.

This is what it looks like when the page loads:

…and then when you play it, it goes full screen like this:

Right now on slider revolution, we have a different hero for video and for desktop. Even if there’s a way to build what we are looking for within the header builder, we would want the mobile version to be full screen video header 1980x1020 and our desktop hero the current size as well.

Is this possible?

Thank you!!

[ruenel]

Hello Ashley,

Thanks for writing in! Yes, that is possible. Please check out this tutorial video:

With the tutorial video, you can remove the background color of the Bar element so that it will be transparent and just floats over the Hero image or a video, or any element.

Best Regards.