[Resolved] Breadcrumbs modification

[Tomasz]

Hi GP Team,

I’m using Yoast SEO breadcrumbs integrated with GP. It works but…
The home page + category pages in breadcrumbs are in blue (as all links globally) and active posts are in black.
How can I modify breadcrumbs color and keep links in posts in blue?
I manage my breadcrumbs with the below CSS:

#breadcrumbs {
font-size: 12px;
padding: 10px 10px 10px;
color: #0a0a0a /*this line changed only a part of breadcrumbs showing an active post*/
}

image

Question about position. How Can I put post breadcrumbs below the H1 title or below meta?
I’m using the below header element:

<h1>
{{post_title}}
</h1>
<p>
{{post_date}} | {{post_terms.category}}
</p>

image 2

Regards,
Tomasz

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Tomasz]

done

[Ying]

Try to replace your css with this:

#breadcrumbs, #breadcrumbs a {
    font-size: 12px;
    padding: 10px 10px 10px;
    color: #0a0a0a
}

Let me know 🙂

[Tomasz]

Hi Ying,

It works although the text is wider now. Is there any CSS I can add to manage width? Thank you:)

What about the second part of my question about breadcrumbs location under the header created with the header element?

This image shows a draft post so it is not visible on my page. I’m working on the final version and I’m curios what is the best way to implement breadcrumbs somewhere below title or meta.

Best Regards,
Tomasz

[David]

Hi there,

Yoast provides a Short Code that can be used to display the Breadcrumbs – you can find it here:

https://yoast.com/help/implement-wordpress-seo-breadcrumbs/#pageshortcode

Instead of using a Hook to display the breadcrumbs you can simply include the Shortcode inside the Header Element.

[Tomasz]

Hi David,

I wasn’t aware of this code. It works now. Thank you.

Best Regards,
Tomasz

[David]

You’re welcome

[Author]

Posts