Hello,
Thank you for contacting Rank Math and bringing your concern to our attention. I’m sorry for any inconvenience this issue may have caused you.
You can use and customize this CSS code to modify the Rank Math breadcrumbs on your site:
.rank-math-breadcrumb {
padding-left: 110px;
background-color: beige;
color: #5a03fc;
padding-top: 25px;
}
The above code should look like this for example:
Here’s a tutorial on how to use custom CSS on your site:
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
I hope that helps.
Thank you.
Hi,
Thanks for your reply. I have tried that CSS and also below:
.rank-math-breadcrumb {
padding-left: 110px !important;
background-color: blue !important;
color: #ffffff !important;
padding-top: 25px !important;
}
Nothing changes?
Any ideas?
Thanks
Darran
Hello,
Can you please clear your website cache and check again?
If the issue persists, we might need to take a closer look at the settings. Please edit the first post on this ticket and include your WordPress login in the designated Sensitive Data section.
Please do take a complete backup of your website before sharing the information with us.
It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:
https://wordpress.org/plugins/temporary-login-without-password/
You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):
https://wordpress.org/plugins/wp-security-audit-log/
We really look forward to helping you.
Hello,
I have updated the sensitive data as requested. Can you please check further?
Thank you.
I have done all the normal cache, server and cookie clearing but no change. Also I would like for the breadcrumbs not be be shown on home page, how can I do this please?
Hello,
A media query wasn’t closed from a previous CSS rule. I closed it and the CSS is not getting applied. I have also modified the code to remove the breadcrumbs from the homepage.
Please check and let us know if you need any other assistance.
Hi,
Okay that’s great thanks. But i have nearly 20 other sites to add the same CSS, so will they work or do I need to do something else first please?
Thanks
Darran
I need to know what changes you made please so I can apply them to all my other sites, thank you.
Hello,
The CSS code should be work on all of your site which have Rank Math breadcrumbs.
You’ll just need to make sure that the last CSS code’s curly braces {} are closed. If it’s closed, then the code provided above should work without any issue.
Thank you.
Hi,
I’m using:
.rank-math-breadcrumb {
padding-left: 90px !important;
background-color: #000000 !important;
color: #ffffff !important;
padding-top: 25px !important;
padding-bottom: 2px !important;
}
and it’s not working on any other sites?
Okay, I’ve worked that out now. How do I stop breadcrumbs showing on home page please?
Hello,
You could try replacing the current code snippet you have for the breadcrumbs with this one to display the breadcrumbs everywhere except the homepage:
if ( function_exists('rank_math_the_breadcrumbs') && !is_home() ) {
rank_math_the_breadcrumbs();
}
Let us know how it goes. Looking forward to helping you.
Thank you.
That’s great, you’ve helped me perfectly!
Hello,
We are super happy that this resolved your issue. If you have any other questions in the future, know that we are here to help you.
If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post about your overall experience with Rank Math? We appreciate your time and patience.
If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.
Thank you.
