i have created my store header transparent and works very well on desktop view but it doesn’t working properly on the mobile view it collapsing with the product image in mobile view
my store url
A Shopify store owner reports that their transparent header works correctly on desktop but collapses with product images on mobile view.
Multiple solutions proposed:
Several community members offered CSS-based fixes, primarily involving:
theme.liquid file (before </head> or </body> tags)component-slider.css with media queries targeting mobile screens (max-width: 749px)base.css with positioning rules for the sticky header wrapperCommon approach:
Most solutions involve:
Status: Multiple solutions provided with screenshots showing expected results, but no confirmation yet from the original poster on which solution resolved the issue. The discussion remains open pending user feedback.
i have created my store header transparent and works very well on desktop view but it doesn’t working properly on the mobile view it collapsing with the product image in mobile view
Hey @odejia9587
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @odejia9587 ,
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Hello @odejia9587
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-slider.css
add this code at the end of the file.
@media screen and (max-width: 749px) {
.slider.slider--mobile .slider__slide {
padding-top: 4.5rem;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
@odejia9587 Please follow below steps to properly align header and product images on mobile view. Let me know whether it is helpful for you.
sticky-header.header-wrapper {
position: relative !important;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.