[Support request] Customize Breadcrumbs Appearence

[Sara Genone]

Hi all
I added to my web site the code to display breadcrumbs as described in your documentation here:

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

I need now to customize appearence of the breadcrumbs as showed in these attached images

Image Example – (this is what I want to realize)
https://www.dropbox.com/s/6p0rkeaznz5kmb5/Example%20of%20Breadcrumbs%20after%20image%20headerd%20in%20all%20pages.png?dl=0
Image my web site : https://www.dropbox.com/s/l6lx1skk0qbp35o/Add%20Breadcrumbs%20after%20image%20headerd%20in%20all%20pages2.jpg?dl=0

Could you help me?

Thank you in advance!
Sara

[David]

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

[Sara Genone]

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

[David]

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.

[Sara Genone]

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

[Leo]

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.

[Sara Genone]

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

[Leo]

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

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

[Sara Genone]

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

[Leo]

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 🙂

[Sara Genone]

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

[Leo]

Which site did you import before?

[Sara Genone]

SERVICE by Mike Oliver

[David]

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.

[Sara Genone]

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

[Author]

Posts