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

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

Home Forums Support How to add page title to header (see image)

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #864704
    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.

    #864894
    David
    Staff
    Customer Support

    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?

    #864915
    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?

    #864918
    David
    Staff
    Customer Support

    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.

    #865519
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a shot:

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

    Let me know 🙂

    #865678
    Tom Snelders

    Hi Tom,

    I think this worked out well.

    Thanks Tom and David for the help!

    Regs,
    Tom

    #865805
    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.

    #865892
    David
    Staff
    Customer Support

    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?

    #866245
    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?

    #866250
    David
    Staff
    Customer Support

    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.

    #866765
    Tom Snelders

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

    #866767
    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?

    #866885
    David
    Staff
    Customer Support

    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?

    #866910
    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.

    #866916
    David
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.