Archived topic

Smaller breadcrump container

5 replies · Started by Héctor on July 18, 2020

Viewing posts 1–6 of 6

July 18, 2020 at 12:37 pm #1368035

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!

July 18, 2020 at 2:16 pm #1368090

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/

July 18, 2020 at 2:42 pm #1368105

Thanks Leo!

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

July 19, 2020 at 3:18 am #1368451

Hi there,

try this CSS:

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

July 19, 2020 at 7:36 am #1368616

Worked! Thanks a lot! :)

July 19, 2020 at 8:27 am #1368783

Glad we could help :)

This archived topic is closed to new replies.

Start building better websites today.