[Resolved] How to add page title to header (see image)

[Tom Snelders]

See for below question: https://drive.google.com/open?id=1lvzgVkfJRhOx5JF5ZO5H70eBaiHXeykX

I would like to have the page title visible at the bottom of the header element within a white block (similar width as the body)

As it almost looks like the body overlapse the header a little.

How can I smartly achieve this?

I thought to merge it in the photo using photoshop, but then I can imagine that it would not be shown correctly on a smartphone.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Hi there,

Give this CSS a shot:

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom Snelders]

Hi Tom,

I think this worked out well.

Thanks Tom and David for the help!

Regs,
Tom

[Tom Snelders]

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.

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

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

[Tom Snelders]

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?

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts