How To Move This Breadcrumbs To Top Of The Product??
Store :- https://hypestockexchange.in/
I Have Impulse Theme!
Topic summary
A user seeks to reposition breadcrumb navigation to the top of product pages on their Shopify store using the Impulse theme, specifically on mobile devices.
Proposed Solutions:
-
CSS modification approach: Add custom CSS code to the theme’s stylesheet (base.css, style.css, or theme.css) within a media query targeting screens up to 749px width. The code uses absolute positioning to move the breadcrumb element.
-
Alternative method: Insert CSS code above the
</body>tag in the theme.liquid file instead of modifying the stylesheet directly.
Both solutions involve adding similar CSS rules that adjust the breadcrumb’s position property and top spacing. Screenshots are provided showing the expected result. The discussion remains open with no confirmation from the original poster about which solution worked or if the issue was resolved.
1 Like
Hi @Emiway
This is only in the mobile right? Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
nav.breadcrumb {
position: absolute;
top: 20%;
}
.page-content.page-content--product {
padding-top: 90px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
hello, please add the below code above in theme.liquid
online store >> edit code >> theme.liquid
after added
