Archived topic
Is it possible to have a Page Hero element with a merged header?
4 replies · Started by Greg on September 3, 2022
Hi guys,
I setup my homepage hero section as an element as I wanted to use a grid and add some simple animation effects - so using the new page hero element type seemed like a good solution.
I've now run into a small problem, as I would like to have a background image which runs behind both the page hero element and the header/navigation.Is this possible?
Or do I need to get the container + grid + content from the Block element into a Header element (with merge switched on)? If it needs to be done this way, could you give me some pointers on adding a container with a 66/33 split grid into the code section of a hero Header.
I hope this all makes sense!
Thanks,
Greg
Hi Greg,
I believe this documentation and video is exactly what you are looking for:
https://docs.generatepress.com/article/transparent-header-and-navigation/
Let me know if this helps :)
Thanks Leo,
That's much easier than I was expecting - I think I was overthinking it! 🙂
One (very) minor thing I've noticed with this method, where I have the 'hero' section setup as part of the page now, I have a min-height set of 100vh, but it seems to be slightly off. I've checked and double checked the offset from the header is correctly set. Any ideas what else might be causing this to be off slightly?
I'm planning to add an animated scroll down button at the bottom of this container, so having it finish in the right spot could be quite important.
Thanks,
Greg
EDIT: Facepalm moment. Just realised it's the WordPress toolbar adding the extra pixels, disabled that and the 100vh is perfect.
Hi Greg,
Just checked the page you attached, the hero section is exactly 100vh in height on my end.
Hi Ying,
Thanks for having a look, and good timing. I just edited my reply above with the following explanation! :D
Facepalm moment. Just realised it’s the WordPress toolbar adding the extra pixels, disabled that and the 100vh is perfect.
Thanks,
Greg
