Archived topic
Make hero section and primary navigation "share" background
3 replies · Started by CRAIG on June 9, 2021
I would like to have a background which covers both the primary navigation and hero section.
***edit*** - Basically I want to do the same as the GeneratePress homepage!! Just realised it's set-up in this way.
Could you help me do this?
I have privately attached a link to a landing page (not mine) which shows both the navigation section (albeit no links - but you get the idea) and the hero section utilising the same background.
I have also added a link to my staging site where I have the background in the hero section but not in the primary navigation section.
I basically want the background to span both the primary navigation and the hero section.
Thanks
Craig
Hi there,
couple of things:
1. First edit the Container Block with your hero image - and increase the Top Padding - to around the height of your site header.
2. Then create a Header Element:
https://docs.generatepress.com/article/header-element-overview/
On the Site Header tab select Merge with Content, then enable the Navigation colors. Change the Site Header and Nav colors so they have transparent backgrounds.
DO NOT add anything to the Page Hero Tab.
Then set the Display Rules Location to the page(s) where you want it merged with your hero.
Awesome
This worked perfectly, thank you
Glad to be of help
