Re-creating video header with menu

[Christine]

Hey GP crew,

I’m using the latest version of GP and GP Premium, along with Beaver Builder. Is it possible to recreate a video header like in this site (https://www.schoolhelps.com/) and has the video playing and the menu as a part of it. And when you scroll down the menu transitions to a sticky?

I’ve been trying a whole bunch of different combos, with GP menu disabled and just built in Beaver Builder. And then with the menu enabled and sticky, but I can’t get it transparent over the video.

Cheers,
Jules

[Leo]

Hi there,

This should help:
https://docs.generatepress.com/article/page-hero-background-video/

Then just need to merge with the header/navigation:
https://docs.generatepress.com/article/header-element-overview/#site-header

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christine]

Hey Leo,

Thanks for the quick reply. Will this make it the header for every page, or do I make it page specific. I only want this video playing on the homepage. Where do I input the HTML and CSS? bit confused with it. Thanks

[Leo]

You can make it page-specific by using the display rules as explained in the article:
https://docs.generatepress.com/article/header-element-overview/#display-rules

HTML can go in the page hero content:
https://docs.generatepress.com/article/header-element-overview/#content-1

CSS can be added using one of these methods:
https://docs.generatepress.com/article/adding-css/

Another option would be to create that background video header with BB and merge with the header/navigation:
https://docs.generatepress.com/article/transparent-header-and-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christine]

I tell ya Leo, it might just be time to hire me as a head developer 😉 Fiddled around with it for a while, but found the easiest way was to just save the current Beaver Builder row I had. Then I copied all the same steps you suggested, but instead of using the HTML, I just inserted the BB shortcode. Bang!

Cheers!

[Leo]

Glad you were able to figure out 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts