X Pro Full Screen Video Header

I’m running the X theme and don’t want to use Cornerstone. I’m trying to create a full screen video that, on load fills the entire screen with a transparent nav bar at the top of the page overlaying the video that is sticky and will remain at the top when scrolling down. I’ve got the direct link of my Vimeo video and have created the video but I can’t get it to fill the screen. It fills the full width, but I’d like it to fill the screen, even if that means cropping in on the video to do it. I’m also having an issue getting my navbar to float above the video. Any thoughts?

You can see my test site here; http://theluckylabs.com/arcmedia

Hi there,

The X theme does not have such a functionality out of the box and you will need to customize the theme to achieve a feature like that and that is outside of our support scope

We will not be able to implement the feature for you but we can give you the guide to do it yourself.

The first thing is the transparent sticky header which you need to follow the steps below:

https://xthemetips.com/transparent-fixed-header/129/

Then you need to use the Revolution Slider to have the Full-screen view:

Thank you.

So, I won’t be able to use Pro on that page at all? Because, correct me if I’m wrong, if I’m using Cornerstone on a page, I can’t use Pro, right? And if I want this type of navigation on my entire site, does that mean that I can’t use Pro anywhere?

Hi,

You can still use PRO Header if you are using Cornerstone.

PRO Header is design for building Headers and Cornerstone is designed for building Contents.

So you can build your Header using PRO Header and Create your page Content using Cornerstone.

Though what you are trying to achieve can easily be done with the theme’s native Header and Revslider.

Please refer to the links below.

Thanks

I really appreciate the responses, but I’m more confused than ever. So much of what you’re sharing seems specific to X theme, while some of it seems relevant to Pro. For example, this link that was shared (https://xthemetips.com/transparent-fixed-header/129/), talks about Cornerstone and X theme. As far as I can tell, if I’m running Pro, I don’t even have access to Cornerstone. And if I do, I sure as heck can’t find it anywhere. The you share this screenshot (https://image.prntscr.com/image/e7mU9YVZSRqDCZc_Cg25HQ.png). This looks NOTHING like my page settings. I can find that setting and make that change, but that image makes me think that I’m in the wrong place. Then you mention this, “PRO Header is design for building Headers and Cornerstone is designed for building Contents.” Cool. That’s fine, but once again, how to I even access Cornerstone? I swear I’m not an idiot. I created an entire site with X-Theme. I upgraded to Pro because I thought it would give me some new functionality with a new site that I’m developing, but so far it’s just confused me to no end. I can’t even figure out how to make a simple header and full screen video. :frowning:

Hey Steven,

We’re very sorry for the confusion here. It can be achieved in both X and Pro though it’s a bit easier in Pro since you don’t have to use custom CSS. Please let me get back to you with a demo or screencast of how to achieve it in X (or Classic Header) and Pro (Header Builder).

Thank you for your patience.

Here’s for the X or Classic Header setup https://youtu.be/u3u9IzFGd0M. Play and pause the video to follow along the steps.

Here’s for Pro Header Builder setup https://youtu.be/0m5ga7WwvZc

As you can see in both setups, scrolling past the slider would make your logo and text blend into the background if they have the same color. I would recommend that you make your nav stick past your slider only. That effect is achievable in Pro. See https://youtu.be/MqAOkvCf320

Hope that helps.

Yeah, I guess so. It just sees a little clunky. The menu clearly disappears and then reappears. I guess I’m looking more for something like this: http://www.whoisowenjones.com

It’s much more subtle. The nav bar is sticky at the top with a transparent background. Then as it slides past the hero image or rev slider, the background fades in and from then on out, you have an opaque nav bar up top. The navbar never disappears or appears. It’s always in the same spot. Only the background appears when called.

I feel like I’m getting close. Here’s where I’m at currently: http://theluckylabs.com/arcmedia/arc-front-page/

I have the single sticky navbar. I duplicated it but removed all the elements, keeping only a background. I’ running into 2 main problems as I see it. 1) I can’t get the nabber to appear AFTER I scroll past the rev slider. It appears pretty much as soon as I start scrolling. And 2), I can’t get it to appear BEHIND the navbar. It always wants to appear below it. Any thoughts? I feel like I’m SO close.

Also, I would rather the background just fade in rather than slide, but if that’s not possible I can live with the slide in.

Hi There,

Please provide your login credentials so we can take a closer look on your setup.

Thanks!

Sure thing.

Hi There,

Thank you for the credentials, 1) Please adjust the sticky bar’s Trigger Offset, the sliding seems to max out at 150 but you can actually set that beyond 150.

  1. Regrettfully for now, that is the only animation for the sticky bar, to slide in and slide out.

Thanks,

Unfortunately, this just doesn’t work. The trigger offset is not an elegant way to solve the problem. What happens for people who have a different sized window? Setting it to 800 might work in one instance, but not another. A percentage would be more appropriate, but a fixed pixel count just isn’t. For now I’m doing away with the first menu and just having the 2nd menu appear when the user scrolls down. But I don’t want it to appear until they’ve gotten just below the rev slider. A fixed pixel count is too random. Is there a way to make it, say, 100% so that when the user has scrolled down below the full screen slider, it will appear then, regardless of what their window size is?

Hi There,

You can also use an ID to trigger the offset, for example, add an ID to your first section below the slider: my-section you can use #my-section as an offset trigger.

This way, on any device as son as you slide pass the slider it will trigger the header.

Unfortunately we do not offer a fade-in color effect as you wish, the replacement of the bars is the only off the box solution.

Hope it helps

Okay, now THIS is what I’m looking for. And it works perfectly! Thanks so much!

You are very welcome :slight_smile:

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