Site logo

Archived topic

Yoast Breadcrumbs Styling

3 replies · Started by Matthias on January 12, 2022

Viewing posts 1–4 of 4

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!

This archived topic is closed to new replies.