Using Yoast Breadcrumbs – changing font with css not working

[Lawrence]

Hello

I have read many questions that are similar with seemingly simple answers regarding how to change the font of the Yoast breadcrumbs using simple css. This was one of the solutions that worked for other people but it is not working on my site.

#breadcrumbs {
font-size: 14px;
padding-bottom: 15px;
}
I went to the inspect page in my browser and was able to change the body link size but that affected everything else.
Please advise!
Thank you

[David]

Hi there,

how are you adding the breadcrumbs to the site? Its currently being output in a Span tag with no class or ID.

Be good if we can get a class on the element if not then you could try this:

.site-content > span:first-of-type {
    font-size: 12px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lawrence]

David
yes, that did work, thank you so much. As far as how I added the breadcrumbs; I took the shortcode and used the elements feature to make a hook. I copied and pasted the shortcode in the hook with nothing else. Is there somewhere in the element or the Yoast panel that you are suppose to add the class or id? If so I would rather go that route.

[Tom]

Hi there,

Can you share the code you’re using in your Element? I believe WC has a parameter you can add to the function/shortcode which outputs a wrapper with a class/ID.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lawrence]

here it is wpseo_breadcrumb

[Lawrence]

that is it I removed the brackets
sorry about that it doesn’t want to seem to paste into doc

[Tom]

What if you do the following instead?:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Be sure to check “Execute PHP” in the Element settings.

Then you should have a #breadcrumbs selector to work with.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lawrence]

yes, that did the trick. Thanks so much!!!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts