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!
Topic summary
A user is attempting to reposition breadcrumbs on product pages to appear just above the product title, but encounters issues with the breadcrumbs shifting position across different device sizes.
Problem Details:
- Breadcrumbs currently display in an undesired location
- Position changes when previewed on different screen sizes
- User seeks a stable solution that maintains consistent placement
Proposed Solutions:
Two community members provided CSS-based fixes:
-
First approach: Add custom CSS to
theme.liquidfile before the</body>tag, targeting breadcrumb alignment with media queries for screens 768px and wider -
Second approach: Insert CSS code into
base.cssfile with similar media query targeting, adjusting margin and content justification properties
Both solutions use responsive design techniques (@media queries) to control breadcrumb positioning specifically on desktop/tablet viewports while maintaining mobile compatibility. The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved.
1 Like
Hello @INKLY
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hello @INKLY
- In your Shopify Admin go to online store > themes > actions > edit code
- 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;
}
}
