Mobile sticky header overlaps product/collection titles and some product images after custom code made the header fixed across pages on a Shopify store. The requester asks for a mobile-only spacing solution and wonders if it can also apply to blog pages.
A suggested fix was to add CSS in assets/timber.scss.css: a media query @media screen and (min-width: 769px) targeting body:not(.template-index) .main-content with padding-top: 80px. This aims to create top spacing below the header. (Sticky header: a header fixed at the top while scrolling; media query: CSS rules that apply at specified screen widths.)
The change did not work as intended; it distorted the desktop layout and “scattered” elements. No confirmation of improvement on mobile or blog pages.
No decisions or finalized fix. The issue remains open, with a need for a mobile-only solution that adds spacing beneath the sticky header without affecting desktop layouts.
Hi. On the MOBILE version of My shopify store www.lynckeys.com, I added a code that made the header sticky and appear through all the pages. Sadly, when I go on the mobile version of my store, the sticky header overlaps the title of my product pages or collections. is there a code to add spacing between the header/logo and the page title (in mobile version only)?
on some products, the header overlaps the product picture. can this also work for blog pages as well? thanks
Please add below css in bottom of assets/timber.scss.css file
@media screen and (min-width: 769px)
body:not(.template-index) .main-content {
padding-top: 80px;
}
Thank you.
sadly it didnt work because it distorted the desktop version of my site as well and made everything scattered everywhere