[Resolved] Breadcrumb styling issue

[sipahi]

Hello,

As you will see in the link I provided (only admins can see), I am using excerpt under title (I’m telling this just to let you know)

I added yoast breadcrumb following this tutorial https://docs.generatepress.com/article/adding-breadcrumbs/

I also searched the forum and tried to style breadcrumb using .breadcrumbs

It has no effect as you will see (!important also have no effect).

what am I missing?

This is what I’m using to try if .breadcrumbs work.

.breadcrumbs {
    background-color: #e6e6e6!important;
}

Thanks in advance

[David]

Hi there,

The Yoast Shortcode no longer outputs any classes.
Can you try wrapping the shortcode in a <div> like so:

<div class="breadcrumbs">Place shortcode here</div>

Then you can style the .breadcrumbs class

[sipahi]

You’re the best!

[David]

Glad to be of help

[Sonja]

Where should the DIV be placed? At the moment i have this code in a elemnt:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

[David]

Hi there,

we updated the Doc to include the <div> :

https://docs.generatepress.com/article/adding-breadcrumbs/#using-functions

[Sonja]

So I have this, like your docu says:

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

but cannot style bradcrumbs via this. Nothing happens:

/* breadcrumb */
.breadcrumbs {
    font-size: 8px;
}

[David]

You’re CSS would need to be this:

/* breadcrumb */
#breadcrumbs {
    font-size: 8px;
}

[Sonja]

Thank you very much. I was proud to know some css, but this was apparently not the case.

[David]

You’re welcome
The only mistake was we needed to select the element using its ID.
And IDs start with a # instead of a .

🙂

[Sonja]

🙂 Thanks for explaining this!

[David]

You’re welcome

[Author]

Posts