[Resolved] Page Header and Navigation in front of Background Image

[antware]

Good day guys

Is there anyway I could replicate the Header section of this site using GeneratePress and / or Elementor?

https://www.corrocoat.com/

I would be really appreciative if you could assist.

[David]

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

[antware]

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?

[David]

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.

[antware]

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.

[Author]

Posts