2.8.x
Step 1 — Download MobileDetect.php
Get it from GitHub:
Step 2 — Load it in functions.php
Add this line near the top of your functions.php, with the other require statements:
php
require get_template_directory() . '/inc/Mobile-Detect/Mobile_Detect.php';Step 3 — Update header.php
Replace your current breadcrumb line with this:
php
<nav class="navbar navbar-default" role="navigation">
<?php
if (function_exists('rank_math_the_breadcrumbs')) {
$detect = new Mobile_Detect();
$isMobile = $detect->isMobile();
$isFrontPage = is_front_page();
// Show breadcrumbs only if NOT (mobile AND front page)
if (!($isMobile && $isFrontPage)) {
rank_math_the_breadcrumbs();
}
}
?>
<div class="navbar-header">How the logic works
| Device | Page | Shows breadcrumb? |
|---|---|---|
| Desktop | Front page | ✅ Yes |
| Desktop | Other pages | ✅ Yes |
| Mobile | Front page | ❌ No |
| Mobile | Other pages | ✅ Yes |
Alternative — Pure CSS (no library needed)
If you only need to hide it visually, you can skip MobileDetect entirely and just use CSS in your main.css:
css
@media (max-width: 768px) {
.home .rank-math-breadcrumb {
display: none;
}
}3.74.x
header.php
Replace your current breadcrumb line with this:
<?php
require_once get_template_directory() . '/inc/Mobile-Detect_v3/src/MobileDetect.php';
$detect = new \Detection\MobileDetect;
$isMobile = $detect->isMobile();
?>
<?php if (!($isMobile && is_front_page())): ?>
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
<?php endif; ?>