Styling Yoast breadcrumbs in page hero

[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!

[Leo]

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 🙂

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

[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.

[Tom]

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;
}

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

[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.

[Tom]

Glad we could help 🙂

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

[Author]

Posts