[Support request] style Yoast breadcrumbs

[Femke]

Hi,

I’d like to style the Yoast breadcrumbs but I cant get it to work. I tried some css found on this forum and placed it in the customizer>additional css that didnt work, then i tried Simple Css plugin, pasted it in there but no changes. Am I doing something wrong?

[Leo]

Hi there,

How are you adding the breadcrumbs?

It doesn’t have the usual selectors from what I can tell.

Can you try this method?
https://docs.generatepress.com/article/adding-breadcrumbs/#using-hooks-element

[Femke]

I added the yoast breadcrumbs shortcode in the hook element. I have them showing in the right place on my site now but cant get any styling to them.

[Leo]

That’s very strange. It used to have a specific selector we can use.

Try David’s CSS here:
https://generatepress.com/forums/topic/using-yoast-breadcrumbs-changing-font-with-css-not-working/#post-1040050

[Femke]

ok i tried that but also doesnt make any difference ?

[Leo]

Can you try wrapping the shortcode like this and let me have another look?

<div class="yoast-breadcrumbs">
 [Short code here]
</div>

[Femke]

ok i have pasted this in the element hook now. thanks for checking

[David]

Hi there,

you can now target the yoast-breadcrumbs selector to style eg.

.yoast-breadcrumbs {
/* Styles here */
}

[Matt]

@david and @leo – thanks guys! This helped a lot.

[Leo]

Glad to hear 🙂

[Author]

Posts