- This topic has 4 replies, 3 voices, and was last updated 3 years, 7 months ago by
.
-
Posts
-
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,
GregCustomer Support
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,
GregEDIT: Facepalm moment. Just realised it’s the WordPress toolbar adding the extra pixels, disabled that and the 100vh is perfect.
Customer Support
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! 😀
Facepalm moment. Just realised it’s the WordPress toolbar adding the extra pixels, disabled that and the 100vh is perfect.
Thanks,
Greg
- You must be logged in to reply to this topic.
