Breadcrumbs positioning on mobile view

Shopify Discussion

Topic summary

A Shopify store owner needs to reposition breadcrumbs on mobile view from below the product photo to above it. The store URL is kinnder.com.au.

Technical Challenge:

  • The breadcrumbs code is embedded within the product information block, making repositioning difficult
  • The theme (Release) doesn’t use standard product.css or base.css files

Proposed Solution:
A developer provided CSS code to add to the theme.css file:

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

Implementation Steps:

  1. Navigate to theme code editor
  2. Search for theme.css file in the left sidebar
  3. Paste the CSS code at the bottom of the file

The discussion remains open as the store owner is working through locating the correct file to implement the fix.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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.

Screenshot 2024-09-30 at 12.41.07 PM.png
Screenshot 2024-09-30 at 12.41.07 PM.png726×1014 390 KB

Thanks.

2

@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.

3

Hi @jmariegocela

can you please send us your website url

Thanks

4

Like said before. Please share your URL.

5

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

6

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.

7

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

8

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

9

How can we exactly do this?

10

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:

nidhidhiman004_0-1727765801561.png
nidhidhiman004_0-1727765801561.png417×739 96.2 KB

i hope it will work

Thanks and regards

11

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

12

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