Breadcrumb not display on mobile

[MinhJV]

Hi everyone, I got into a problem with breadcrumb function. Before I was disable the breadcrumb in the theme setting ( Alchemy theme). I just enable it again and its showing on the desktop but not the mobile. Can you have a look on the website and instruct me how to make it show up? Im really appreciate!

[PageFly-Richard]

Hi @MinhJV

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

@media screen and (max-width: 767px){ .breadcrumbs { display: block !important; } }

Please refer to this screenshot: https://prnt.sc/afpBHc_RJbvN

Hope that my solution works for you.

Best regards,

Richard | PageFly

[MinhJV]

Hi Richard,

Thanks for your help. Its appear now but the location of the breadcrumbs is not nice, its almost same line with the page title. Can you move it a bit higher on pages that have banner. For product pages the breadcrumb is too close to the header can you move it a bit lower? This is the link to my website: hcookware.com. And you can see below the example of a general page and product page

[Wish-It]

Hi @MinhJV , try this CSS let me know if it works.

@media screen and (max-width: 767px){
.header-overlapping .banner-candidate:first-child .breadcrumbs {
    margin-top: 60px;
}
.section-product .breadcrumbs {
    margin-top: -60px;
}
}

It may also look better to center align the breadcrumb for pages with banner,

@media screen and (max-width: 767px){
.header-overlapping .banner-candidate:first-child .breadcrumbs .breadcrumbs-list {
    justify-content: center;
}
}

[MinhJV]

Hi Wish-It,

Thanks for your input, If I use your code only, the breadcrumbs still not show up on the mobile version. Therefore I mix it with the code of Richard above, Its appear but there is no different. You can see the screenshot below, that is the code im using and the margin is not change at all

[Wish-It]

The opening and closing brackets are mixed up, replace the code between tag with this.

@media screen and (max-width: 767px){
.breadcrumbs{
display: block !important;
}
.header-overlapping .banner-candidate:first-child .breadcrumbs {
    margin-top: 60px;
}
.section-product .breadcrumbs {
    margin-top: -60px;
}
}

[PageFly-Richard]

Hello Minh
Try again with this code:

@media screen and (max-width: 767px){
.header-overlapping .banner-candidate:first-child .breadcrumbs {
margin-top: 50px !important;
}
.template-product.no-banner .main-content>.shopify-section:first-child {
margin-top: 90px !important;
}
}

https://prnt.sc/1SisxxBXjgvf
https://prnt.sc/mES6gaEQ6Y9n

[MinhJV]

Thanks you Richard and Wish-IT,

Both solutions is work well for me!

[PageFly-Richard]

You are welcome @MinhJV