[Resolved] Header and content are mixed after replacing page header with element

[Dinant]

I am trying to replace my page header with an element of type header.
The result is that the content is being placed behind the header.
Looks like the old “Place content behind header” option which I didn’t use.

[Dinant]

I think it has something to do with the content field which only contains the text “<!– page header –>”.

[Tom]

Hi there,

This is what the new “Offset Header Height” option is for.

Enter the height of your header in that field, and it will prevent overlapping.

You can find the height of your header by right clicking your page and selecting “Inspect”.

Then hover over the site header element, and you’ll see the dimensions. Will get a tutorial out for this today 🙂

[Dinant]

Ok, I understand the new offset header field.
If I put 216px (height of header incl height of primary menu) for desktop mode the content is ok in desktop mode.
If I add 156px in mobile mode the content is also ok in mobile mode. But If the width of the screen is sized under 393px a box with the background color is shown. This was not the case with the legacy Page Header.

[Tom]

The old page header used a different method to merge, which complicated the HTML quite considerably.

This is happening because your tagline goes onto two lines at that width.

Any reason you’re using the merge option on this page? That layout should be achievable without using Elements/a merged site header.

[Dinant]

Ok, I only want a background image for the header. Therefore I’ve used the Page Header in the past.
Is there is better solution to achieve a background image for the header?

[Tom]

You can use the Backgrounds module: https://docs.generatepress.com/article/backgrounds-overview/

Simply add your background image to the Header background area and you should be good to go 🙂

[Dinant]

Ok that looks much better.
Thanks for your help.

[Tom]

You’re welcome 🙂

[Author]

Posts