Use this code instead of first :-
Topic summary
Goal: Make Dawn’s header transparent at page start, then fixed and non-transparent on scroll.
Progress: After several code attempts (added in theme.liquid and CSS), the scroll behavior was achieved, but two issues remained: a line (border) under the header and the header overlapping page content.
Fix proposed: Add top padding (100px) to product grid and main section via CSS in base.css/style.css/theme.css using section-specific selectors to create space below the fixed header.
Attachments: Screenshots were shared to illustrate the overlap issue and the padding result.
Latest update: The suggested CSS didn’t work on the user’s new preview link, likely due to different template/section IDs used in Dawn (selectors like .section-template–[id] and section#shopify-section-template–[id] are store-instance specific). The user requested a full CSS adjusted to that link.
Key terms: CSS (styling rules), theme.liquid (theme layout file), section IDs (unique identifiers per template instance).
Status: Ongoing. Needs CSS tailored to current section IDs and a rule to remove the header’s bottom border.