Transparent Header

Shopify Discussion

Topic summary

Goal: keep the Monaco theme’s header transparent while scrolling.

Access shared: the store URL and password were provided for review.

Conflicting observations: one helper said the header already stays transparent; the original poster shared a screenshot showing it becomes opaque on scroll.

Proposed fixes (CSS-focused):

  • Edit base.css to enforce transparency on scroll by targeting the header overlay state: set background-color: transparent for .header_overlay-scroll under both [data-scheme=light] and [data-scheme=dark].
  • In base.css at the @media (prefers-color-scheme: light) block for :root [data-scheme=auto] .header_overlay-scroll, remove the background-color line so the header doesn’t gain a background when scrolling.
  • Apply generic CSS to .site-header to force a transparent, fixed header and optionally adjust text/link colors; ensure no JavaScript alters header styles.

Notes:

  • “header_overlay-scroll” is the class used when the header overlays content during scroll; “data-scheme” controls light/dark/auto color schemes.
  • One suggestion referenced adding code in theme.liquid, but the code snippet was missing; screenshots were used to show results.

Status: no confirmation from the original poster; the issue remains open with actionable CSS edits to test.

Summarized with AI on December 23. AI used: gpt-5.
8

Hi @middlebeats
Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 723
search this code

@media (prefers-color-scheme: light) {
:root [data-scheme=auto] .header_overlay-scroll {
--color-foreground: var(--color-base-text);
--color-link: var(--color-base-text);
--color-foreground-title: var(--color-title-text);
--color-button: var(--color-base-button-background);
--color-button-text: var(--color-base-solid-button-labels);
--color-button-secondary: var(--color-base-outline-button-labels);
--color-social: 0, 0, 0;
background-color: rgba(var(--color-background));
}
}

and replace with this code.

@media (prefers-color-scheme: light) {
:root [data-scheme=auto] .header_overlay-scroll {
--color-foreground: var(--color-base-text);
--color-link: var(--color-base-text);
--color-foreground-title: var(--color-title-text);
--color-button: var(--color-base-button-background);
--color-button-text: var(--color-base-solid-button-labels);
--color-button-secondary: var(--color-base-outline-button-labels);
--color-social: 0, 0, 0;
}
}

result

17.png
17.png1290×919 136 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like