Breadcrumbs hidden on Blog and some other pages

Tagged: Breadcrumbs

This topic has 6 replies, 2 voices, and was last updated 5 years, 5 months ago by sapana.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
June 12, 2019 at 4:31 am #174760

mjudd
Participant

HI, there

I have enabled Breadcrumbs under theme options and works ok on almost all pages. However, on Blog post pages unless I have Header image enabled then Breadcrumbs are hidden behind the top primary menu.

This changes depending on Browser (IE, Edge, Chrome, Resolution) and device ie mobile vs PC

Is there a fix or a simple CSS change that needs to be made? Just annoying :/

Thanks

June 12, 2019 at 6:08 am #174768

sapana
Participant

@mjudd: Please post in your site url so that I can look into that issue.

Kind Regards,
Sapana

June 12, 2019 at 6:18 am #174769

mjudd
Participant

http://b0ns9.hosts.cx/bread-and-conversation/bread-angles-are-successful-entrepreneurs-welcome-pig-and-pepper/ is a good example where there is no header image.

June 12, 2019 at 7:03 am #174778
sapana
Participant
@mjudd: Hello mjudd,
Go to=> Appearance=> Customize=> Additional CSS=> add the following css code
```
#breadcrumb-list {
   padding-top: 22px
}
@media screen and (max-width: 1280px){
#breadcrumb-list {
   padding-top: 55px
  }
}
@media screen and (max-width: 480px){
#breadcrumb-list {
   padding-top:110px
  }
}
```
let me know if this works out!

Kind Regards,
Sapana
June 12, 2019 at 8:22 am #174791

mjudd
Participant

Thanks for your help and I can see where you are going, but not there yet :/

1. Regular page – http://b0ns9.hosts.cx/about/ (now showing deeper breadcrumbs banner)
2. Blog page with header eg. http://b0ns9.hosts.cx/bread-and-conversation/simple-recipe-for-the-most-delicious-brioche-in-the-world/ (as per 1)
3.Blog default page (Search and Blogs widget) – http://b0ns9.hosts.cx/bread-and-conversation/small-food-awards-cheese-category-winners/ (spot on)
4. Blog page – with blog image (no header) – http://b0ns9.hosts.cx/bread-and-conversation/to-gf-or-not-to-gf/

It seems related to screen width as when you reduce/enlarge smaller around the 1900 PX width it shows and then disappears. Strange.

Where is this transition managed and how can it be modified?

June 12, 2019 at 8:28 am #174795

mjudd
Participant

Sorted 🙂

It was the logo that was messing up the layout. Will change scaling

Thanks once again for your help as that pointed me in the right direction 😀

June 13, 2019 at 12:24 am #174843

sapana
Participant

@mjudd: Glad to know that mjudd you figure it out.let me know if you face any difficulties in future. Have a good day 🙂

Kind Regards,
Sapana
Author

Posts