[Resolved] Breadcrumb Alterations

[Matthew]

Hi,

I have breadcrumbs set up on my site using a PHP hook.

Is there a way to modify them by replacing ‘Home’ with a small image as in the example below?

[Ying]

Hi Matthew,

Could you share the PHP code you added?

Let me know 🙂

[Matthew]

Here it is:

<?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?>

[David]

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.

[Matthew]

Hi David,

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

[David]

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.

[Matthew]

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.

[David]

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

[Matthew]

That’s great. Thanks David.

[David]

Glad to be of help.

[Author]

Posts