Yoast Breadcrumb on Featured Image

[Emmanuel]

Hi,

I added breadcrumbs but I need your guidance on how to add them on top of the featured image on single posts.

Like this https://prnt.sc/t4uxao

Is this possible with GP?

Thanks

[David]

Hi there,

Yoast provides a shortcode to display their breadcrumbs:

https://yoast.com/help/implement-wordpress-seo-breadcrumbs/#pageshortcode

You can include that within your Header Element like so:

<div class="single-breadcrumb">
// Put shortcode here
</div>

then i can help with some CSS to position it if needed.

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

[Emmanuel]

Hi David,

Actually I have changed to Rank Math and added the breadcrumb as you instructed.

Thanks

[David]

I am not seeing the breadcrumb added to the single post ?

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

[Emmanuel]

Sorry,

I have cleared cache, you can check now.

[Leo]

Looks like it’s already above the featured image?
https://www.screencast.com/t/fj5OdvKA2JP

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

[Emmanuel]

Hi Leo,

I want it to look like this https://prnt.sc/t4uxao

Thanks

[David]

Try this CSS:

@media(min-width: 769px) {
    .inside-page-hero {
        position: relative;;
    }
    
    .single-breadcrumb {
        position: absolute;
        top: 40px;
        left: 0;
    }
}

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

[Emmanuel]

Thanks David,

Can I reduce the size of the font and background so it works on mobile too?

Thanks

[David]

To apply it to mobile you can remove the media query like so:

.inside-page-hero {
    position:relative
}

.single-breadcrumb {
    position: absolute;
    top: 40px;
    left: 0
}

If you want to change the font-size for mobile then use this CSS:

@media (max-width: 768px) {
    .rank-math-breadcrumb {
        font-size: 12px;
    }
}

Changing the background and other styles – you already have this CSS which you can edit:

.rank-math-breadcrumb {
    background-color: #E4E2DD;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px
}

Or make a copy of that and add it inside the media query to style it differently for mobile.

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

[Emmanuel]

Thanks,

Looking good, I have changed this CSS

@media (min-width: 769px) {
    .rank-math-breadcrumb {
        font-size: 12px;
    }
}

To

@media (max-width: 769px) {
    .rank-math-breadcrumb {
        font-size: 12px;
    }
}

Much appreciated.

[David]

Glad to hear that

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

[Author]

Posts