A Luxe theme user needs to remove sticky positioning from custom breadcrumbs so they scroll naturally with page content across all devices (desktop, mobile, tablet).
Current Issue:
Solution Provided:
A CSS fix was offered that involves:
.header-group and breadcrumb positioningrelative instead of fixedTechnical Details:
!important declarations to override existing stylesThe discussion appears resolved with a working CSS solution, though no confirmation from the original poster yet.
My website was designed using Luxe theme in that I added a custom breadcrumbs section in that It was sticky, I don’t want it as sticky when I scroll, I want that also to be scrolled in all the views like deskop, mobile and tablet.
website: https://fgghmzc6eb351j0i-86107750704.shopifypreview.com
Hey @Sivadarshan ,
I cannot see the breadcrumb on the Product page. I follow the preview link but I cannot see the it. I want to know did you remove it?
If yes then revert it back so that I check it and provide you solution code.
Here what I see:
Looking forward to hearing back from you.
@TheScriptFlow Now I enabled it, Please have a look
Hi @Sivadarshan
.header-group {
position: static !important;
width: 100%;
z-index: 100;
}
div#shopify-section-sections--24390867255600__fae0db8d-7080-48c7-b779-9ec074b0c8df {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 111111;
}
.section-header.shopify-section-group-header-group {
width: 100%;
position: fixed !important;
top: 33px;
z-index: 4;
}
#shopify-section-breadcrumbs {
position: relative !important;
top: 83px !important;
}
Result:
before scroll
After scroll
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 
(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
