Yoast bredcrumbs Styling

Hi there,

you have to add the code like Leo provides here:

https://generatepress.com/forums/topic/yoast-breadcrumbs-styling/#post-467121

This will add a wrapper and necessary CSS classes to style the breadcrumb

You can then use:

/* Style the container */
.yoast-breadcrumb {
    padding: 10px 0; /* add padding top and bottom */
    background-color: #f00; /* Add a background color */
}

For the individual items:

.yoast-breadcrumb a {
    /* styles for the links */
}

.yoast-breadcrumb .breadcrumb_last {
    /* Style current page item */
}

Thanks, i tried but it did not work.

Are you using the Code Snippets plugin to add that?

The code I've provided in the previous post is supposed to be for the old GP hooks module or the hook elements module:
https://docs.generatepress.com/article/hooks-element-overview/

Can you give that a shot?

thanks,

two issues.
how to make it look like https://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css#more-2768:~:text=selectors%2C%20then%20given%20subtle%20rounded%20corners%20with

Secondly, there if a gap between breadcrumb and post how to reduce the gap.

how to make it look like https://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css#more-2768:~:text=selectors%2C%20then%20given%20subtle%20rounded%20corners%20with

We can help with some simple CSS like changing the text color and font size but helping with extensive CSS/custom solution like this is out of the scope of this support forum unfortunately - Breadcrumbs are not GP elements as well so you can try to request the help from Yoast.

Please refer to the forum scope here:
https://generatepress.com/what-support-includes/

Secondly, there if a gap between breadcrumb and post how to reduce the gap.

This one is simple. Try this CSS:

p#breadcrumbs {
    margin-bottom: 0;
}