[Resolved] Styling Yoast breadcrumbs in page hero

Home Forums Support Styling Yoast breadcrumbs in page hero

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1174694
    Stephanie

    Hello,

    I’m recreating an existing website for a nonprofit and am having a hard time getting the Yoast breadcrumbs where they need to be in the page hero section.

    I created a page hero section using Elements in GP Premium. It appears at the top of all pages except the front page and the Donation page.

    I added a div and placed the Yoast breadcrumbs shortcode in a paragraph with an id.

    I used negative margins to get the breadcrumbs where they are now but I can’t seem to get them to their correct place, closer to the bottom.

    Here’s what the staging site is looking like right now:

    http://34.69.246.245/writing-workshops-winter-2020/

    And here’s an example of the same page on the original site (the site I’m replicating:

    https://uptownstories.org/writing-workshops-winter-2020/

    Any advice and suggestions appreciated!

    #1174755
    Leo
    Staff
    Customer Support

    Hi there,

    What if you reduce the bottom padding of that header element?
    https://docs.generatepress.com/article/header-element-overview/#padding

    Let me know 🙂

    #1175585
    Stephanie

    Thank you for that suggestion.

    What happens is the photo moves out of position when I reduce the padding of the header element.

    I lowered the padding to 60, then 50 and now 30(!) even though the breadcrumbs are nearly where they should be (they’re almost on the right “line”) there was too much of the photo showing on both the left and right and the breadcrumbs moved to the right from where they were before.

    I increased the padding on the top to 80 (now 85) to compensate but they’re still not quite where they need to be but the breadcrumbs are nearly perfect.

    The heading needs to be higher and the breadcrumbs lower. There’s too much of the boy on the left.

    I would crop the photo but the original site has the photo uncropped. There has to be some way to do this but I’m no wizard at CSS.

    The original padding for the header before adding the breadcrumbs was 75px top, 75px bottom, 10px left and 30px right. With that padding, the photo was pretty close to the original.

    When I first added the breadcrumbs the image became larger. So I experimented with using float: right to make it smaller and played with negative margins. That nearly worked. I’m finding it hard to figure out how to place the image the way the client wants it and get the breadcrumbs where they need to be.

    Would it be better if I drop the page hero altogether and create a custom header in my child theme?

    Or use a filter to add the breadcrumbs instead of placing the shortcode in the page hero?

    I’m guessing Yoast is adding padding somewhere too.

    #1175840
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What if you remove the bottom padding from the Page Hero and then add padding to the inner element?:

    .hero-inner-wrap {
        padding-bottom: 80px;
    }
    #1176588
    Stephanie

    Thank you so much!

    I got it as close as I can to the original.

    So it’s fixed now!

    Thanks to you and Leo for all your help.

    GeneratePress is exceptional.

    #1176789
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.