Issue:
Transparent header poorly overlaps first content of site. Desktop + Mobile.
Affects:
Header > Home page > Transparent background = TRUE
Header > Product page > Transparent background = TRUE
Header > Collection page > Transparent background = TRUE
All sections except for Hero?
Notes:
Transparent header, first shopify section, negative margin-top and related variables requires revisiting.
Negative margin-top does not account for other Header blocks. In particular, Announcement bar which is both commonly used and setup in clean install.
Current styling fix:
Remove margin-top from first shopify section.
/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
margin-top: calc(var(--header-group-height) * -1);
margin-top: 0; /* negative margin not suitable for this build */
}
