How to show Header element on the homepage as well as blog posts?

Hi there,

The best practice I would recommend is to create 2 separate header elements for the posts page and single posts:

- Posts page: A header element with a custom image as the background image option as WordPress doesn't allow a featured image on posts/archives pages.

- Single posts: A header with featured images as the background image option so the background image would be dynamic.

https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-2-choose-a-background

Let me know if this helps :)

I know youve included the link but I'm not able to get this to actually show in the posts.

Hi Heath,

You need to set the display rules. The display rules location will define where the header element will display. :)

I did that but nothing was showing.

I've inspected the site and it's actually there but it isn't visible because the element height was 0.

We're close. We just to make it visible by adding padding top or bottom on the Header element.

Here's a demo video you can copy to make it appear. :)
https://share.getcloudapp.com/yAul8LQ0

Adding {{post.title}} is optional. I just added it to show more possibilities with the element. :D

Thanks. This worked. The only other thing is how do I get the text to be centered?

Nice one!

The only other thing is how do I get the text to be centered?

One the same tab where you set the padding, you should be able to see a "Horizontal Alignment" option. Just set it to "Center".
https://share.getcloudapp.com/wbuP1kRB

I've done that as well but the text still isn't centered. Its to the left of the screen.

Is there a specific page or post I should be looking at?

The home page is centered:
https://www.screencast.com/t/TX5MA3FO

So are the single posts:
https://www.screencast.com/t/jqcCFKPpJzn

Maybe its just mobile where I see the issue. It is definitely not centered on my mobile device.

And it is the posts that I am referring to.

You have uneven left and right padding set on mobile:
https://www.screencast.com/t/jqYyFt59TE4E

You can adjust the setting with the mobile toggle activated:
https://docs.generatepress.com/article/header-element-overview/#padding

Worked like a charm.

Glad to hear :)