[Resolved] Easiest Way To Have Multiple Headers On Selected Pages

[JOHN]

Ive been using GP for only about a week, so still new.

Whats the easiest way to have different headers on some pages?

I am using the Catalyst site library

For example, I want my homepage header to be a specific image and then my contact page header to be another image.

And I would have the majority of the remaining pages to be another header image.

So, basically I would like to have 3 or 4 different headers on my site.

I’ve been playing around with the Elements section, but can only figure out how to get the homepage header to work

[David]

Hi there,

So if you’re using featured images on your pages and posts you can create a Header Element and use the Featured Image for the background and in Display Rules for All Pages and All Posts. Then just set the featured image for each of the pages or posts.

For blog page and archives, which don’t have a featured Image you need to create an individual header for them eg, Blog or the Category Archive and assign a Custom Image for the Background.

The thing to note is Display Rule Conflicts. For example if you use a top level display rule such as Entire Site, All Pages etc. And subsequently create a specific Header for a single page, you must exclude that Page from the Header that is set to the entire site.

[JOHN]

Thank you. I will try this.

[David]

You’re welcome.

[JOHN]

Just did this and it works!

Is there any way to close the padding between the top of the header and the navigation menu?

I tried adjusting the top padding to “0”, even did negative numbers, but the padding doesnt seem to move at all.

Also, in order to get the header to display on the new contact page, I had to put in “<h2></h2>” in the page hero section of that element ( i just copied it from the “front page” element.) I couldnt get the new contact header to appear until i did that.

[David]

Cool. Not sure what you mean by ‘close the padding’ on the other pages you have a merged site header, which is activated on the Site header tab. Just copy across those settings from the other header.

Yes, the header element has to have content for it to display, if you wanted just an image you can add a HTML comment – which doesn’t get displayed eg.

<!-- this comment can say whatever you want -->

If you want to add the Post or Page title you can use template tags and wrap them in a H1 like so:

<h1>{{post_title}}</h1>

So you can have a header that a. uses the featured image and b. pulls in the post title. So a dynamic page header 🙂

[JOHN]

It looks good on mobile, but not desktop. I think I have a padding problem, but not sure.

My “home page” header goes all the way to the top of the page (mobile or desktop), right to the top of the navigation bar.

This new “contact page” header only goes up to the bottom of the navigation bar. No big deal, but I cant seem to figure out how to adjust it. I copied the settings from the “home” header and that didnt work either.

[David]

So if you edit the Contact Page Header Element and go to the Site Header tab, whats settings do you have there?

BTW this article covers a lot:

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

[JOHN]

That fixed it!

The Contact Page Header “Site Header” tab was set to “no merge”

I changed that to “merge”. Then the “offset site header height” box opened up. I set that to “2”.

Navagation Location was/is set to “default”

Hit the update button and presto chango! Its exactly what I need!

Thanks for you help

[David]

Glad to be of help.
As a note, you may find this plugin super useful:

https://en-gb.wordpress.org/plugins/duplicate-post/

Always use the New Draft as opposed to clone option. Before doing so go to the Settings Tab and in the plugins settings you can select which post types you want to be able to duplicate, it includes Elements 🙂

[Author]

Posts