- This topic has 11 replies, 3 voices, and was last updated 6 months, 3 weeks ago by
David.
-
AuthorPosts
-
June 23, 2020 at 2:26 am #1338391
Emmanuel
Hi,
I added breadcrumbs but I need your guidance on how to add them on top of the featured image on single posts.
Like this https://prnt.sc/t4uxao
Is this possible with GP?
Thanks
June 23, 2020 at 3:39 am #1338470David
StaffCustomer SupportHi there,
Yoast provides a shortcode to display their breadcrumbs:
https://yoast.com/help/implement-wordpress-seo-breadcrumbs/#pageshortcode
You can include that within your Header Element like so:
<div class="single-breadcrumb"> // Put shortcode here </div>
then i can help with some CSS to position it if needed.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 28, 2020 at 9:04 am #1344609Emmanuel
Hi David,
Actually I have changed to Rank Math and added the breadcrumb as you instructed.
Thanks
June 28, 2020 at 11:43 am #1344728David
StaffCustomer SupportI am not seeing the breadcrumb added to the single post ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 28, 2020 at 12:28 pm #1344759Emmanuel
Sorry,
I have cleared cache, you can check now.
June 28, 2020 at 1:50 pm #1344823Leo
StaffCustomer SupportLooks like it’s already above the featured image?
https://www.screencast.com/t/fj5OdvKA2JPDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 28, 2020 at 10:49 pm #1345060Emmanuel
June 29, 2020 at 2:00 am #1345181David
StaffCustomer SupportTry this CSS:
@media(min-width: 769px) { .inside-page-hero { position: relative;; } .single-breadcrumb { position: absolute; top: 40px; left: 0; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 29, 2020 at 2:05 am #1345191Emmanuel
Thanks David,
Can I reduce the size of the font and background so it works on mobile too?
Thanks
June 29, 2020 at 4:47 am #1345343David
StaffCustomer SupportTo apply it to mobile you can remove the media query like so:
.inside-page-hero { position:relative } .single-breadcrumb { position: absolute; top: 40px; left: 0 }
If you want to change the font-size for mobile then use this CSS:
@media (max-width: 768px) { .rank-math-breadcrumb { font-size: 12px; } }
Changing the background and other styles – you already have this CSS which you can edit:
.rank-math-breadcrumb { background-color: #E4E2DD; display: inline-block; padding: 5px 10px; border-radius: 10px }
Or make a copy of that and add it inside the media query to style it differently for mobile.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 29, 2020 at 5:24 am #1345377Emmanuel
Thanks,
Looking good, I have changed this CSS
@media (min-width: 769px) { .rank-math-breadcrumb { font-size: 12px; } }
To
@media (max-width: 769px) { .rank-math-breadcrumb { font-size: 12px; } }
Much appreciated.
June 29, 2020 at 5:50 am #1345407David
StaffCustomer SupportGlad to hear that
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.