[Resolved] Breadcrumbs to the top

[Dominic]

Hi there,

I’d like to bring the rank math breadcrumbs to the top of a container. The main content of the container is centered.

Here is the site for example
https://zeitler.swiss/produkte/schnureinblasgeraete/schnureinblasgeraet-ez50/

Here is how it works..

/*breadcrumbs */
.rank-math-breadcrumb {

font-size: 14px;
position: absolute;
margin-top: -120px;

}

But the problem is, if i have an other format, it doesnt work anymore. what a surprise.. 🙂

And my 2nd question
Is it possible to style the breadcrumbs with different styles? For example, on some pages the font color is white and on others black?

Thanks for your help
Dominic

[Ying]

Hi Dominic,

1. I don’t see why you need to add the position: absolute; margin-top: -120px; , you just need to reduce the min-heightof the gb-container which is set to 700pxright now, or you can remove the min-height and add top/bottom padding to thegb-container, it will give you better control on the spacing.

2. As you are adding the breadcrumbs to a gb-container, you can add an addtional CSS class to the container block, eg. white-text, then you can use this CSS for the text in the breadcrumb:

.white-text.gb-container .rank-math-breadcrumb {
    color: white;
}

and this for the links in breadcrumb:

.white-text.gb-container .rank-math-breadcrumb a{
    color: white;
}

[Dominic]

Hi Ying

Yeah, this approach definitely sounds more logical.. it works. 🙂

thank you for your help!
Dominic

[Ying]

My pleasure 🙂

[Author]

Posts