How to change breadcrumbs position on product page

[INKLY]

Hi, I am trying to change the position of the breadcrumbs on my product pages (See screenshot) but when I preview it it moves (See screenshot). Does anyone know how I can move it just above the product title and not move on different device sizes? Thank you for your help!

Store URL: https://servicedetable.com/collections/dinnerware/products/white-elegant-dinnerware-set?variant=4923...

 

 

[Tech_Coding]

Hello @INKLY 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 768px) {
   nav.breadcrumb.breadcrumbs--default.inherit {
      padding-left: unset !important;
       text-align: center !important;
   }
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[ZestardTech]

Hello @INKLY 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (min-width: 768px) {
.breadcrumb.breadcrumbs--default.inherit {
justify-content: center!important;
margin-left: 65px!important;
}
}

[neetugw1]

To change the position of the breadcrumbs on your product pages and keep them consistent across different device sizes, you can use custom CSS. Here's how you can do it:

1. Go to Online Store > Themes.
2. Click on Actions and select Edit Code.
3. Open your theme.scss.liquid or style.css.liquid file.
4. Add the following CSS code at the bottom of the file:

css

Copy code

.breadcrumbs { position: relative; /* Adjust positioning */ top: -20px; /* Adjust the value to move it above the product title */ z-index: 10; /* Ensure it's above other elements */ }

Make sure to adjust the top value to your preference to achieve the desired spacing. After making the changes, preview them on different devices to ensure it looks good everywhere.

If you need further assistance, please feel free to reach out!