Topic summary
Main issue: A custom “transparent header” in the Shopify Dawn theme is overlapping content across all pages.
Key points and suggestions:
- Quick fix options: Disable the transparent header in the header settings, or add page-specific padding (e.g., for collections: .collection { padding-top: 40px; }). The latter only partially helps.
- Root cause: The transparency was added via custom CSS; Dawn doesn’t natively support a transparent header. One participant recommends starting fresh or using a theme with built-in transparent header support.
- Visual concerns: Homepage header links are unreadable due to dark text on a dark image; switching to a lighter image and/or adjusting text color can help.
Code-based workaround provided:
- In header.liquid, change header position from fixed/absolute to relative to prevent overlap.
- Add CSS:
• .site-header { background-color: transparent; }
• .site-content { padding-top: [header height, e.g., 80px]; }
• .site-header.scrolled { semi-opaque background + shadow for readability on scroll }
Status: No confirmation of a final fix. Open items: where exactly to place CSS (e.g., base.css) wasn’t explicitly confirmed; two paths remain—disable/use another theme vs. implement the custom workaround.