Hi All,
im looking to move my collection title and breadcrumbs to the left and have the title above the breadcrumbs. My site is https://luxurymrkt.com/collections/menswear
id like it align like this pic below 
thank you
Topic summary
Goal: Left‑align the collection title and breadcrumbs in the Shopify Impulse theme, with the title displayed above the breadcrumbs, primarily on mobile.
Proposed changes:
- Add CSS to assets/theme.css targeting mobile (max-width: 749px):
- Set #CollectionHeaderSection .section-header__shadow to display: block (first snippet used !important).
- Then also left-align .section-header__title within .section-header__shadow.
Results so far:
- Initial CSS moved the breadcrumbs but not the title.
- Updated CSS successfully left‑aligned the title, but only on collection pages that have a collection image.
Notes:
- “Breadcrumbs” are the navigational links showing the page path.
- All changes were scoped to mobile via @media (max-width: 749px) and appended at the bottom of theme.css.
- Screenshots were shared to illustrate the desired layout and current behavior; code snippets are central to the issue.
Current status: Partially resolved. The solution works on some collection pages (with images) but not on those without images. Further investigation is needed to account for markup/layout differences between image and non‑image collection headers. The thread remains open.
1 Like
Please add the following CSS code assets/theme.css bottom of the file.
@media screen and (max-width: 749px){
#CollectionHeaderSection .section-header__shadow {display: block !important;}
}
Thanks!
Please add the following CSS code to your assets/theme.css bottom of the file.
@media screen and (max-width: 749px){
#CollectionHeaderSection .section-header__shadow {display: block;}
#CollectionHeaderSection .section-header__shadow .section-header__title {text-align: left !important;}
}
Thanks!
