Why does my breadcrumb layout does not apply?

Hello,

I have this in my CSS:

/*Change the layout and position of the BREADCRUMBS*/
.breadcrumb {
	margin-bottom: -10px;
	margin-top: 20px;
	font-size: 14px;
}

I used an Element to add the breadcrumb and I’m using Yoast as a plugin.
Can anyone please tell me why the CSS does not apply on my breadcrumb as you can check on this page?

Thank you.

The class name on the page is breadcrumb_last,

Maybe should work for you

.breadcrumb,
.breadcrumb_last {
	margin-bottom: -10px;
	margin-top: 20px;
	font-size: 14px;
}

Thanks a lot. IT almost works.
Look:

1- Why does the CSS not work on the word Accueil (it means Home)?

2 - Also, the margin settings have no effect.

How are you adding the breadcrumb? Using Element of type block? Or with a shortcode?

If you use the block element, you can add custom classes to the Yoast breadcrumb and target that instead.

image

Thanks again for your support.

I’m not a coder and I’m a bit confused. This is how I added the breadcrumb, using a Hook:

I can’t see where I can add a CSS to this hook.
Also, what should be the class if I do so.

The current code I have in my style.css is:
/Change the layout and position of the BREADCRUMBS/
.breadcrumb,
{
margin-bottom: -10px;
margin-top: 40px;
font-size: 14px;
}

.breadcrumb_last {
margin-bottom: -10px;
margin-top: 40px;
font-size: 14px;
}

I’m not sure what I should keep or delete. Anyway, this is the result I have with this:
image

As you can see the first part of the breadcrumbs (Accueil) is not affected by the CSS and the font remains big. Also, the margins are not applied on the whole breadcrumbs.

Thank you

Ah I see, try this:

<div class="breadcrumb">[wpseo_breadcrumb]</div>

And keep only the first CSS:

.breadcrumb {
    margin-bottom: -10px;
    margin-top: 40px;
    font-size: 14px;
}
1 Like

Yeeeahh!: That worked like a charm.
I only had to remove the “-” sign for margin-botton since the

seems to have change the layout settings.

1 Like