Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Breadcrumb Alterations

Home Forums Support [Resolved] Breadcrumb Alterations

Home Forums Support Breadcrumb Alterations

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1764024
    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?

    breadcrumbs

    #1764201
    Ying
    Staff
    Customer Support

    Hi Matthew,

    Could you share the PHP code you added?

    Let me know 🙂

    #1764335
    Matthew

    Here it is:

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

    #1764456
    David
    Staff
    Customer Support

    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.

    #1765266
    Matthew

    Hi David,

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

    #1765350
    David
    Staff
    Customer Support

    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.

    #1765421
    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.

    #1765462
    David
    Staff
    Customer Support

    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;
    }
    #1765480
    Matthew

    That’s great. Thanks David.

    #1765564
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.