Page Header and Navigation in front of Background Image

Hi there,

yes with GP, using GP Page Headers, which can be set to full width and merged with Site Header, which in your example is set to a contained size.

Here somes articles on using Page Headers:

https://docs.generatepress.com/article/page-header-overview/

Let us know if you need an extra hand

Hi there David. Nope followed the guidelines and seriously battling to get anything close to the other website I am trying to emulate.

You couldn't possibly outline some step by step instructions by any chance?

Hi, of course:

First the Site header:
Logo added to: Customiser > Site Identity
Email and Phone. Add HTML Widget (or Elementor Template) to Header Widget. If using Elementor keep that template background transparent.
Header Background can be set in the Customiser > Backgrounds (or Colors).
Header width: Customiser > Layout > Header > Set both widths to contained.
Navigation: Customiser > Layout > Navigation > Set this to contained width and location below Header.

Second the Page Header:

IMAGE:
Do not add Background image. The Page Header will use the Featured Image set on the page / post.
CONTENT:
Add the content (text and button) or Elementor Template shortcode in there.
Add Background Image > Check
Parallax Effect > Check
Container > Full Width
Inner Container > Contained
Top & Bottom Padding > add a minimum value eg. 50px
ADVANCED:
Merge with Site Header > Check
Place Content Behind Site Header > Check

Now save the Header. You can either apply this globally to the different post templates in the Page Header > Global Locations menu. Or you can assign them to each page/post in the post editor under the Page Header Meta box.

Add a featured image to the Page / Post for the header to display it.

Hi David

Followed your instruction to the letter and the result was nowhere close. Thanks anyway. Made a plan using Elementor and playing with the Z-Index. Closer to what I was looking for.

Thanks again though.