How to add page title to header (see image)

Hi there,

simplest way is to leave the Page Title within the content of your post, we can then add some negative margins to the main content to pull it up over your featured image.

Have you got a site set-up with the basics in place that i can see?

I'm building this site (http://creatievewerkkamer.nl/de-werkkamers/geboorte/) behind a coming soon plugin.

So you can't see it now. Or do you know a free coming soon plugin where I can give you using some setting access to? Or should I create an account for you on my site?

Or can you maybe tell me where I can add this negative margins? CSS?

If you want to send me some login details via the Account Issue form:

https://generatepress.com/contact/

Please add the URL of this Topic to the form so we can track.

I only need to see the frontend.

Hi there,

Give this CSS a shot:

#primary {
    margin-top: -100px;
}

Let me know :)

Hi Tom,

I think this worked out well.

Thanks Tom and David for the help!

Regs,
Tom

Sorry, this css rule reflects to the entire site now.

How can I set this up for specific pages? Or how can I exclude this on some pages.

Is there any particular logic to which pages you want it to effect?

For example - this would only apply to Posts:

.single-post #primary {
    margin-top: -100px;
}

The single-post class is added to the body of all posts so you can target them specifically.

Or do you have a header element on those pages you want it to apply to?

Yes, I don't use header element for posts yet.

But I've got two element headers, one for my homepage and one for all other pages.

For my homepage element header I don't want this css rule to be applied, it must be applied to the other header element.

Does this make sense?

If you just want to target just that specific page then you would use the Page ID like so:

.page-id-XXXX #primary {
    margin-top: -100px;
}

Replace the XXXX with the relevant ID.

And can this also be turned around? Let it apply to all pages except for one?

O, and when I enable sections on a page after adding the above css the body is falling behind the header. The title is then gone. I think behind the header.

How can I fix this?

You can use a :not pseudo property in CSS so this would apply to all pages but the one you specify:

body:not(.page-id-XXXX) #primary {
    margin-top: -100px;
}

Can you link me to that page with the Sections?

Thanks, that worked perfect.

Now I only have the issue with the page title falling behind the header section when using sections on my pages. The text within the sections do appear in front of the header element.

Sections automatically remove the Page Title. You would need to add one manually within the Top Section.