Breadcrums covered by header menu - Supply Theme

Technical Q&A
1

Hi there,

My breadcrumbs seem to be covered by the header menu. They cannot be seen entirely but they’re there and I can click on the path (even select the text) but it seems to be covered by the header (if you look at it really close you might see the ends of some letters, like a p or a q). I’ve pasted this screenshot where I’ve selected everything that’s at the top to show that breadcumbs are there. My site is store.logicsacademy.com. How can I make the breadcrumbs entirely visible again? Thank you!

Carmen-Logics_0-1618596611957.png
Carmen-Logics_0-1618596611957.png1587×711 116 KB

2

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (min-width: 769px){
#shopify-section-product-template nav.breadcrumb {
    margin-top: 30px;
}
}
1 Like
3

Thank you for this response! It’s not showing the complete path on mobile, how could I fix that? Also, is there a way I could change the word “home” in the breadcrumbs for “store”? Thanks again!

4

Add this css

@media screen and (max-width: 768px){
#shopify-section-product-template nav.breadcrumb {
    margin-top: 30px;
}
}
1 Like
5

Thank you so much! Worked like a charm!!