Breadcrumb Formatting

#40820
  • Resolved Chris Sabian
    Rank Math free

    I know the following should be used in template files to display the appropriate, dynamically generated breadcrumbs.

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

    Or

    On desktop this is great but on mobile “Home > Category > Category > Post” is creating a horizontal scroll bar and a broken looking breadcrumb design.

    Notably i use an image for the seperaters (rather than an HTML character)

    How can we create breaks between each breadcrumb element and how can further CSS styling be introduced to properly theme the output?

    • This topic was modified 4 years, 7 months ago by Michael Davis.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Hello,

    Thank you for contacting Rank Math and sorry for any inconvenience that might have been caused due to that.

    I can’t seem to replicate the issue on my end. Check the attached screenshot in the sensitive section. However, if you need to change the Breadcrumb HTML, you should use the following filter in your functions.php file:

    /**
     * Filter to change breadcrumb html.
     *
     * @param  html  $html Breadcrumb html.
     * @param  array $crumbs Breadcrumb items
     * @param  class $class Breadcrumb class
     * @return html  $html.
     */
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
    	// theme_breadcrumb_function();
    	return $html;
    }, 10, 3);

    Looking forward to helping you. Thank you.

    ​​​​​​​

    Hi,

    Thanks, I’ll take a look at the code.

    The screenshot you provided does indeed show the broken version.

    Currently it’s showing as:

    Home> Category
    >
    Category
    > Post

    It should be more like:

    Home
    > Category
    > Category
    > Post

    Hello,

    Thank you for contacting the support and sorry for any inconvenience that might have been caused due to that.

    Please test the code and let us know how goes. If you don’t mind, would you please check if there is a conflict with one of the plugins or the theme you are using.
    Assuming you are using the latest version of all the plugins and the themes (please update if not yet).

    To determine that, please follow this troubleshooting guide:
    https://rankmath.com/kb/check-plugin-conflicts/

    Only the site admin would know and your users won’t be affected by this troubleshooting.

    Please let us know if you find the culprit.

    Looking forward to helping you.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

The ticket ‘Breadcrumb Formatting’ is closed to new replies.