Full Screen Background Video

Support
#1

Hello,

I’m trying to add a big full screen (responsive) video to the background of a Theme X Pro site. I’m able to do it in Cornerstone but I need it to go behind the top nav as well. Any ideas or tips to help me accomplish this? This is an example of I’m going for: https://www.aspirecollegestation.com

#2

Hi There,

Thank you for writing in, please add the CSS below on Theme Options > CSS, this will bring your first section behind the header (you need the logobar/navbar to have a transparent background)

@media (min-width: 980px) {
	.masthead, .x-masthead {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

Hope that helps,
Cheers!

1 Like
#3

That did the trick! Now I’ve got a text block over the image/video but it’s appearing at the top behind the nav/header as well. Any tips on how to have that automatically place centered height/width in the section?

#4

Hi There,

Upon checking your page the content looks centered.

Please provide a screenshot to clarify the issue.

Thanks!

#5

No, sorry that link I sent is an example of what I’m going for. Here’s a screenshot.

#6

Hi again,

Can you please share the URL of your site as well so we can take a look at the actual issue?

Thanks!

#7

The site is under development so it’s not “live”

#8

Hi There,

In that case please provide the credentials as well and point the specific section.

Thanks

#11

Hi There,

We can add a Gap element on top of the text to offset the height of the Header and push your text down. Adjust the Gap size where you see it fits, also add a Gap element on the bottom of the text to balance it out and make the text look on the center of the Section.

Do you really plan to use the UberMenu 3 plugin? If not, please deactivate it, the standard menu should look fine with the header design that you’re after, you just need to change the NAVBAR LINKS color that is under Theme Options > Header

Cheers!

#12

Fantastic! Thank you for your help! I’m a big fan of Theme X. This is my first site using Pro.

#13

One more question - how do I force that section with the background image to be at 100% height on load but stay put on scroll? Like this site: https://www.aspirecollegestation.com/

#14

Hi There,

Sorry, I am not entirely sure what do you mean by stay put on scroll, to make your banner to always have 100% height. You can either add min-height: 100vh; inline-CSS to the ROW and remove the gap elements. Or you can have your Gap elements a 40vh size.

If that does not work, please provide us your site URL and login credentials in a secure note.

Thanks,

1 Like
#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.