Archived topic
Yoast Breadcrumbs Styling
3 replies · Started by Matthias on January 12, 2022
Hi,
I read through the various threads but could not find an answer to this advanced styling.
Basically I had this styling with SEOPress breadcrumbs:
/* Breadcrumbs styling */
.breadcrumb {
font-size: 13px; color:#000000; font-weight: 400;}
/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #ffff;
}
.breadcrumb {
padding: 3px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f0f0f1;
border-radius: 4px;
}
.breadcrumb a {
color: #ff7f00;
text-decoration: none;
}
I would like to use this styling now for Yoast Breadcrumbs. I have the element calling the yoast breadcrumbs:
<?php if ( function_exists('yoast_breadcrumb') && ! is_page() && ! is_home() ) : ?>
<?php yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); ?>
<?php endif; ?>
I would need my CSS to be changed, so that it works with the Yoast breadcrumbs. #breadcrumb works for the lines until Style the list. After that, it does not work. Could you do some magic?
Hi there,
be best if i can see it - but you can try this:
#breadcrumbs {
padding: 3px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f0f0f1;
border-radius: 4px;
}
#breadcrumbs a {
color: #ff7f00;
text-decoration: none;
}
Hi David,
thanks a million! Magic again... It works :)
Glad to be of help!