Breadcrumb Trail Styling (SCSS)
Styles breadcrumb trails from the Breadcrumbs shortcode and popular SEO plugins with smaller muted text, chevron separators and a clear current page.
Opens WPIDE on
Code
$muted: #646970;
$separator: "\203A";
.wpide-breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumbs {
margin-bottom: 1.25em;
color: $muted;
font-size: 0.85em;
ol {
gap: 0.35em !important;
}
a {
color: inherit;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
}
[aria-current="page"] {
color: currentColor;
font-weight: 600;
}
}
.wpide-breadcrumbs li > span[aria-hidden="true"] {
font-size: 0;
&::before {
content: $separator;
font-size: 0.85rem;
opacity: 0.6;
}
}Notes
Adjust $muted and the separator character to taste.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.