Archived topic
Re-creating video header with menu
5 replies · Started by Christine on February 19, 2020
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
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
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
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/
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!
Glad you were able to figure out :)
