[Resolved] Smaller breadcrump container

[Héctor]

Hi, I’ve modified my breadcrumbs hook to display before_main_content inside a container. But I’d like the container to have less top and bottom margin and also reduce the space between the container and the article as it is twice the space between the container and the header.

Here’s my hook code:

<?php if ( function_exists('yoast_breadcrumb') ) { ?>
	<div class="grid-container grid-parent">
		<div class="page-header">
			<?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
	
		</div>
	</div>
<?php } ?>

I’ve not added any CSS to it.

Thanks in advance!

[Leo]

Hi there,

Edit your code to this:

<?php if ( function_exists('yoast_breadcrumb') ) { ?>
	<div class="grid-container grid-parent">
		<div class="page-header yoast-breadcrumbs">
			<?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
	
		</div>
	</div>
<?php } ?>

Then add this CSS:

.separate-containers .page-header.yoast-breadcrumbs {
    padding: 5px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Héctor]

Thanks Leo!

The container size is now right. But the gap bethween it and the post remains. Is there any way to remove it?

[David]

Hi there,

try this CSS:

.separate-containers .site-main > .grid-parent,
.separate-containers .site-main > .grid-parent > .page-header {
    margin-bottom: 0;
}

[Héctor]

Worked! Thanks a lot! 🙂

[Leo]

Glad we could help 🙂

[Author]

Posts