[Resolved] Breadcrumbs setup and font size

[Mira]

Hi! I have tried setting up the breadcrumbs with no avail. Could you please help me? They are enabled in Yoast.

Also is there a way to set the font size and distance from the title?

I’d prefer it if it looked something like this: https://thegreenloot.com/wp-content/uploads/2019/11/breadcrumbs.png

Thank you!

[David]

Hi there,

this article explains how to add them:

https://docs.generatepress.com/article/adding-breadcrumbs/

This visual hooks guide will show you which hook displays where:

https://docs.generatepress.com/article/hooks-visual-guide/

Once in place i can take a look at some CSS for styling

[Mira]

I think I did it! The only problem is that there are no categories shown! Could you please take a loot at it?

[David]

I went to your first post “Vegan Protein Bread….” and i see this breadcrumb:

Home > Vegan Recipes > Seasonal > Summer > Vegan Protein “Bread” with Cherries and Walnuts (GF)

[Mira]

Sorry I could set it up after all. Now I only need a little help in the font size. 🙂

[Mira]

Also, how can I remove the post name and ‘Home’ from the breadcrumbs? It should only show the categories and subcategories.

[David]

Cool 🙂
So this CSS to change the font sizes and have the > larger then the text:

/* Set size of > and make all text uppercase */
#breadcrumbs span {
    font-size: 24px;
    text-transform: uppercase;
}
/* Set size of breadcrumb text */
#breadcrumbs span a,
#breadcrumbs .breadcrumb_last {
    font-size: 16px;
}

[David]

Found this PHP snippet to remove the Home:

https://gist.github.com/timstl/5348604#gistcomment-2397251

And the PHP snippet i provide here for removing the Title:

https://generatepress.com/forums/topic/how-to-hide-the-title-part-in-the-breadcrumb-im-using-yoast-seo/#post-614239

[Mira]

Worked beautifully, thank you! 🙂

[David]

Glad to be of help

[Author]

Posts