Customize Breadcrumbs Appearence

Hi there,

if you can add to your Header element using the Shortcode provided in the Yoast docs:

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

Then provide me with a link to your site and i'll take a look at positioning it with CSS

Hi David
I added the code in the Hook element called "Breadcrumbs..."
Please take a look in the Elements of my website
Thank you
sara

Try adding this CSS:

.single-post .page-hero + #page #breadcrumbs {
    margin-top: -40px;
}
.single-post .page-hero + #page #breadcrumbs span,
.single-post .page-hero + #page #breadcrumbs a {
    color: #fff;
}

You may want to add a little more bottom padding to your Header Element.

Thank you David
I modified your code and is perfect for posts:
.single-post .page-hero + #page #breadcrumbs {
margin-top: -125px;
margin-bottom: 120px;
}
.single-post .page-hero + #page #breadcrumbs span,
.single-post .page-hero + #page #breadcrumbs a {
color: #333;
background-color:#f1f1f1;
font-size:13px;

}

Look here https://sviluppo.socialmela.it/sviluppo/assenteismo-e-doppio-lavoro-perche-rivolgersi-allinvestigatore-privato/
The problem is that it doesn't work for page: https://sviluppo.socialmela.it/sviluppo/investigazioni-aziendali/

Could you help me?
Thank you
Sara

The .single-post CSS selector makes so the CSS only applies to single posts.

If you remove that, then the CSS should work for pages as well.

Thank you Leo for the suggestion
Please look here: https://sviluppo.socialmela.it/sviluppo/investigazioni-aziendali/ (this is page)
One last issue: I can put the breadcrumbs position as the same as here - https://sviluppo.socialmela.it/sviluppo/assenteismo-e-doppio-lavoro-perche-rivolgersi-allinvestigatore-privato/ (this is post)?
tks
sara

So you want the breadcrumbs to be inside the page hero?

If so why not just add the breadcrumbs in the page hero itself?

Excuse me Leo but I don't understand what do you mean..
I just want the breadcrumbs will be in the same position both in posts and pages.
Now as you can see from the two links I provided you, the position of the breadcrumbs in the page is totally right side and on the middle of the image header...
Is it different from the posts...
I hope I explained myself ...
Sorry for my terrible english :(
Sara

So currently you are using negative top margin to move the breadcrumbs into the header element.

I think it would be better if you just add the breadcrumbs inside the header element along with the page title.

Can you give that a shot first?

Let me know if you need more info :)

I understand Leo but I don't know how to do this.. :)

Which code I have to insert and where? Perhaps in the Global Page Header?
tks
sara

Which site did you import before?

SERVICE by Mike Oliver

Edit the header element titled: Global Page Header
And add the Yoast Shortcode after the content in the header element.
Once its there we can help position it with CSS.

Dear David
I think something went wrong...

Element - Global Header
https://www.dropbox.com/s/mpxabpjvezg42bg/global%20header%20code.jpg?dl=0

The Result in the Page
https://www.dropbox.com/s/8z9ypcq24i3bty7/Add%20Breadcrumbs%20after%20image%20headerd%20in%20all%20pages_error.jpg?dl=0

...
Thank you
sara