Hello,
I apologize for the inconvenience you’re experiencing with the breadcrumbs on your mobile version. It seems that the CSS code you used to disable the breadcrumbs is not affecting the mobile version of your website.
To resolve this issue, I recommend using Rank Math’s built-in feature to disable breadcrumbs on specific pages. Here’s how you can do it:
- Go to your WordPress Dashboard and navigate to Rank Math SEO > Titles & Meta.
- Click on the Posts tab (or Pages tab if the page in question is a static page).
- Locate the specific page where you want to disable the breadcrumbs and click on the Edit button next to it.
- Scroll down to the Advanced section and expand it.
- Look for the Breadcrumbs option and set it to Disabled.
- Click on the Update button to save your changes.
By following these steps, you should be able to disable the breadcrumbs on the specific page, including on the mobile version.
If you’re still facing issues or have any further questions, please reply to this ticket, and a human agent from our support team will assist you further.
Thank you for your understanding.
Best regards,
Rank Math Support
Sources:
How to Customize Breadcrumbs in Rank Math » Rank Math
Rank Math General Settings
How to Enable Breadcrumbs on Your Website With Rank Math SEO » Rank Math
How to Make Your Theme Rank Math Compatible » Rank Math
As mentioned, here are the things that I’ve tried thus far.
Attempt to fix #1.
.page-id-4077 .rank-math-breadcrumb {
display: none;
}
Attempt to Fix #2.
.page-id-4077 .rank-math-breadcrumb {
display: none !important;
}
Attempt to Fix #3.
body.page-id-4077 nav.rank-math-breadcrumb {
display: none !important;
}
Attempt to Fix #4.
@media screen and (max-width: 768px) {
.page-id-4077 .rank-math-breadcrumb {
display: none !important;
}
}
Attempt to Fix #5.
Use JavaScript to Hide the Element:
If CSS fails due to JavaScript interference, you can use JavaScript to hide the breadcrumb. Add this script to your footer or as an inline script tag:
javascript
Copy code
document.addEventListener(“DOMContentLoaded”, function() {
var breadcrumb = document.querySelector(‘.rank-math-breadcrumb .last’);
if (breadcrumb) {
breadcrumb.style.display = ‘none’;
}
});
Question how do I perform this fix?
Rank Math (@rankmath)
2 years, 11 months ago
Hello @eliasnp
Thank you for contacting the support.
Please use the following filter to remove Breadcrumbs from Schema:
add_filter( ‘rank_math/snippet/breadcrumb’, function( $entity ) {
if ( is_page( ‘PAGE_ID’ ) ) {
return [];
}
return $entity;
});
Hope that helps.
I still need help, I only want to remove the breadcrumbs from one page on my website.
Important Note: When I Open up the page in question via Firefox/Chrome and then go into inspect (to inspect the CSS settings, etc.), I can pinpoint where the breadcrumbs code is still coming through. If I just remove the breadcrumbs code via the inspect tool on the live page, the breadcrumbs disappear. This is the code that still shows up on the page:
<nav aria-label=”breadcrumbs” class=”rank-math-breadcrumb”><p><span class=”last”>actual-text-of-content</span></p></nav>
I removed the actual-text-of-content for privacy.
Also, as asked previously, how do I perform the below fix? Will this work? Can you please provide step by step instructions on how to perform the below fix?
Rank Math (@rankmath)
2 years, 11 months ago
Hello @eliasnp
Thank you for contacting the support.
Please use the following filter to remove Breadcrumbs from Schema:
add_filter( ‘rank_math/snippet/breadcrumb’, function( $entity ) {
if ( is_page( ‘PAGE_ID’ ) ) {
return [];
}
return $entity;
});
Hope that helps.
Never mind, I figured it out.
Hello,
Glad that everything has been sorted out.
Please feel free to reach out to us again in case you need any other assistance.
We are here to help.
Thank you.
