Breadcrumbs positioning on mobile view

[jmariegocela]

Hi,

Can someone help me how I can move the breadcrumbs for mobile view from under the main photo to on top of the product photo. Our theme is Release.

Thanks.

[dws_pvt_ltd]

@jmariegocela, Please share your store URL and password.So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[jmariegocela]

It's https://www.kinnder.com.au/

[dws_pvt_ltd]

Hello @jmariegocela, Your code for the breadcrumbs is comes from the block of the product information. So that it is structured like this. You have to put code of the breadcrumbs in the custom section or snippet file and called it on to the product information.'make a custom section or custom snippet for this.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[jmariegocela]

How can we exactly do this?

[nidhidhiman004]

Hi @jmariegocela 

can you please send us your website url

Thanks

[jmariegocela]

It is https://www.kinnder.com.au/

[lynth]

Like said before. Please share your URL.

[jmariegocela]

It is https://www.kinnder.com.au/ ...

[nidhidhiman004]

Hi @jmariegocela 

add this code on product.css file or base.css file at the very bottom of the file

Try this css : 

@media only screen and (max-width: 768px) {
 nav.breadcrumbs {
    position: absolute;
    top: -58%;
}
}

result:

i hope it will work

Thanks and regards

[jmariegocela]

I can't find product.css or base.css in the backend

[nidhidhiman004]

Hello @jmariegocela 

Sorry i see your theme css files your theme did not support base.css,  in your theme there is theme.css file follow these steps

you should find theme.css 

click on edit code and you will see theme code editor there you will see search box on the left side and search there theme.css

once you found the file paste code at the end of the file.

@media only screen and (max-width: 768px) {
 .shopify-section.shopify-section--product nav.breadcrumbs {
    position: absolute !important;
    top: -58% !important;
}
}

Thanks