Archived topic
Yoast Breadcrumbs Styling
13 replies · Started by Robert on January 9, 2018
I see there's another Yoast Breadcrumbs thread currently in play but I didn't want to hijack it with my question. I'm not having a problem inserting it using the following code snippet:
add_action( 'generate_after_header', 'tu_add_yoast_bc' );
function tu_add_yoast_bc() {
?>
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>
<?php
}However, the breadcrumb ends up to the extreme left of the content like this:
What CSS can I use to create a container for it like what is already wrapped around the content?
Hi there,
Can you try this exact code in Dashboard > Appearance > GP Hooks > After Header:
<?php if ( function_exists('yoast_breadcrumb') ) : ?>
<div class="grid-container yoast-breadcrumb">
<?php yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); ?>
</div>
<?php endif; ?>Make sure execute PHP is checked.
Thanks! This works to put the code within the container. The last thing is... What CSS will wrap it in a container so it follows the pattern of the rest of the site?
I edited the code slightly. Should be the same thing, just better syntax.
Not sure what you mean by wrap it in a container? It should already be in within the container?
I checked your site but don't see breadcrumbs.
Hi Leo,
I'd like to wrap the breadcrumb in .separate-containers so it matches the layout of the rest. And you're right I haven't deployed the breadcrumbs on the site yet. I've been testing on a staging site.
That case maybe you need the inside content container hook or before content hook?
http://demo.generatepress.com/hook-locations/
The inside the content container hook places it in the same place as the after header hook. The before content hook makes it so the breadcrumb repeats within each front page post's container so that's not quite it.
This is how the placement looks on my staging site using the content container hook:
[img]https://s14.postimg.org/nplsqfiu9/Capture.jpg[/img]
So the relative placement is fine other than moving it in from the left and down a bit. I'm looking to see how I might get a box around it comparable to the posts.
Hmm not sure what's giving the bottom padding.
Can you duplicate this on a live site?
Hi Leo.
It's on my live site now - Boatbuild Project. I'm using the inside content container hook with the updated code you gave above. I've also temporarily disabled my caching plugins.
Ultimately, what I'd like to get to is a container around the breadcrumbs so that it models this:
Edited the code again here: https://generatepress.com/forums/topic/yoast-breadcrumbs-styling/#post-467121
Then try this CSS:
.grid-container.yoast-breadcrumb {
background-color: #ffffff;
border-bottom: 1px solid #000;
}
.yoast-breadcrumb p {
margin-bottom: 0;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Thank you!
No problem :)
Hi,
I'd like to style the Yoast breadcrumbs but I cant get it to work. I tried some css found on this forum and placed it in the customizer>additional css that didnt work, then i tried Simple Css plugin, pasted it in there but no changes. Am I doing something wrong?
Hi there,
can you raise a new topic where you can provide a link to the site and we can take a look.
