Archived topic
Breadcrumb styling issue
11 replies · Started by sipahi on December 12, 2019
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
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
You're the best!
Glad to be of help
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>' );
}
?>Hi there,
we updated the Doc to include the <div> :
https://docs.generatepress.com/article/adding-breadcrumbs/#using-functions
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;
}You're CSS would need to be this:
/* breadcrumb */
#breadcrumbs {
font-size: 8px;
}Thank you very much. I was proud to know some css, but this was apparently not the case.
You're welcome
The only mistake was we needed to select the element using its ID.
And IDs start with a # instead of a .
:)
:-) Thanks for explaining this!
You're welcome
