Breadcrumb Alterations

Hi Matthew,

Could you share the PHP code you added?

Let me know :)

Here it is:

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Hi there,

i checked Rank Maths forums and it doesn't look like they have a filter for adjusting just the Home crumb in their
breadcrumbs ( their support may be the best place to ask ).

Will this image be the same across the entire site ? If so and you can share a link to the site we may be able to provide some CSS to 'hide' the home crumb and use the CSS Content property to display an image in its place.

Hi David,

The image would be the same on all posts. I've included a link to the site.

You can try this CSS:

.rank-math-breadcrumb p a:first-child {
    font-size: 0;
}
.rank-math-breadcrumb p a:first-child:before {
    content: url('the_full_url_to_your_image/image.png');
}

Update the URL to the image you want displayed.
Note - the Original Image must be the Exact size you want it to be displayed as it cannot be changed using this method.
May require a little CSS after its added to align it - but i can help with that.

Thanks David, that worked.

It just needs a little bit of adjustment to bring it down and into line with the rest of the breadcrumbs.

Try adding this CSS:

/* center align crumbs vertically */
.rank-math-breadcrumb > p {
    display: flex;
    align-items: center;
}
/* Add space between crumbs */
.rank-math-breadcrumb > p > * {
    margin-right: 5px;
}

That's great. Thanks David.

Glad to be of help.