Dawn 15.4 Glassmorphism Header: Transparent at Page Load

Store Design
1

Hi everyone,

I’m using Dawn 15.4.0 and I’ve already applied a glassmorphism header, but I’m running into a problem:

The issue:

  • On page load or when at the very top of the page, the header has a white background instead of being fully transparent.
  • When scrolling down, the glass/blur effect works fine.
  • I want it to be fully transparent at the top, become glassy when scrolling, and revert to transparent when back at the very top.

A good example of the behavior I want is: :backhand_index_pointing_right: https://lovable.dev/

What I’ve tried:

  • Video 1 creates a glass header, but it’s glossy even on page load: link
  • Video 2 adds glass on scroll, but the header becomes white at the top instead of transparent: link

Question:
How can I make the header fully transparent at the top and glass only while scrolling in Dawn?

Thanks in advance!

Preview Link: https://1ua9whbvlubrlw1o-64748617967.shopifypreview.com

2

Hi.
Your current header is transparent already, you could just move the body up a bit with the code below. If you still can’t figure it out, let me know.
Add this to you bottom of your base.css

@media (min-width: 769px){
#MainContent{margin-top: -80px;
padding-top: 80px;
}
}

3

Hi @crepscity , try using the following snippet in global.js

(() => {
  const init = () => {
    const SCROLL_THRESHOLD = 72;
    
    const styleId = 'header-scroll-styles';
    
    const existingStyle = document.getElementById(styleId);
    if (existingStyle) existingStyle.remove();
    
    const style = document.createElement('style');
    style.id = styleId;
    style.textContent = `
      .header {
        transition: background 0.3s ease, backdrop-filter 0.3s ease;
      }
      
      .header__heading,
      .header__icons svg {
        transition: filter 0.3s ease;
      }
      
      .gm-level-0 .gm-text {
        transition: color 0.3s ease;
      }
      
      .gm-menu-installed .gm-menu.gm-menu-32270 {
        transition: background 0.3s ease;
      }
      
      .header--at-top {
        background: black !important;
      }
      
      .header--at-top .header__heading {
        filter: invert(1) !important;
      }
      
      .header--at-top .header__icons svg {
        filter: invert(1) !important;
      }
      
      .header--scrolled {
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(12px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      
      .header--scrolled .header__heading {
        filter: none !important;
      }
      
      .header--scrolled .header__icons svg {
        filter: none !important;
      }
      
      .gm-menu-installed .header--scrolled .gm-menu.gm-menu-32270 {
        background-color: transparent !important;
      }
      
      .gm-menu-installed .header--scrolled .gm-menu.gm-menu-32270 .gm-item.gm-level-0 > .gm-target > .gm-text {
        color: black !important;
      }
      
      .gm-menu-installed .header--scrolled .gm-menu.gm-menu-32270.gm-bordered:not(.gm-menu-mobile):not(.gm-vertical) > .gm-level-0 + .gm-level-0 {
        border-left: none !important;
      }

      .gm-menu-installed .header--scrolled .gm-retractor {
        filter: invert(1) !important;
      }
    `;
    
    document.head.appendChild(style);
    
    const header = document.querySelector('.header');
    
    if (!header) return;
    
    let isScrolled = null;
    
    const updateHeaderState = () => {
      const shouldBeScrolled = window.scrollY > SCROLL_THRESHOLD;
      
      if (shouldBeScrolled === isScrolled) return;
      
      isScrolled = shouldBeScrolled;
      
      if (isScrolled) {
        header.classList.remove('header--at-top');
        header.classList.add('header--scrolled');
      } else {
        header.classList.remove('header--scrolled');
        header.classList.add('header--at-top');
      }
    };
    
    updateHeaderState();
    
    window.addEventListener('scroll', updateHeaderState, { passive: true });
    
    window.cleanupHeaderScroll = () => {
      window.removeEventListener('scroll', updateHeaderState);
      style.remove();
      header.classList.remove('header--at-top', 'header--scrolled');
      delete window.cleanupHeaderScroll;
    };
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
4

Hi

I tried your snippet in global.js. The logo color switching works perfectly, which is awesome I don’t need to use two separate logos (white/black) anymore :+1:

However, the header is not transparent at the top at all. On page load and when scrolled back to the top, the header still shows a black background instead of being fully transparent. The glass effect on scroll works, but the transparent state never kicks in.

So at the moment, the only part that’s working as expected is the logo color change.

Let me know if I’m missing something or if there’s an adjustment needed to make the header truly transparent at the top.

5

Slapping a fad into a theme not designed for that fad will have continuous rough spots and generally make a website look sloppier by pure mismatch.

And that’s before the problem introduced by having ~15% of the website permanently obstructed by a header that sticks even when scrolling down.

6

By fully transparent you mean white with black text then?

7

Hi,

Let’s forget about the transparent header, maybe thats not good option, and focus only on the logo behavior.

The logo color change on scroll works perfectly on the homepage:

  • At the top, the logo is white
  • When scrolling, it changes correctly
  • Scrolling back up also works as expected

However, on all other pages, the behavior is different:

  • On page load, no logo is visible at the top
  • The logo should be white there, but it isn’t applied
  • Once I start scrolling, the logo appears and turns black, which is correct
  • After that, scrolling back up continues to work normally

So the issue is only the initial page load state on non homepage pages the logo color logic doesn’t run until a scroll event happens.

Since the homepage works perfectly, I’m guessing a small code adjustment could make all pages behave the same way.

check preview link: Sneakers – Creps City

8

Any solution for this?

9

@crepscity Not sure, it looks and acts the same on all pages on my end. Black header, white logo with black background. Header not sticky, re-appears on scroll up.

I would suggest that since you have spent so much time on this one tiny thing in a wide world of ecommerce, that perhaps you’d be better suited with a better theme that has these functions already built in. That way your time can be spent on the actual business…

10

Hi, Thank you for your response but this is a duplicate theme im working on.

You can see the attached screenshots the logo doest show.

Homepage (works perfectly)

  • When the page loads, the header has a black background and the logo is white
  • As I scroll down, the header switches to a glassmorphism effect and the logo turns black
  • Scrolling back up works correctly, and once I reach the top of the homepage the logo turns white again

Other pages (issue)

Preview Link: https://1ua9whbvlubrlw1o-64748617967.shopifypreview.com

11

force the header to be truly transparent when you’re at the top, and only apply the glass background + blur when the page is scrolled. You do that by adding one CSS class that toggles on scroll.

/* Glass header only when scrolling (Dawn 15.4) */
body:not(.header-is-scrolled) .section-header,
body:not(.header-is-scrolled) .header-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.header-is-scrolled .section-header,
body.header-is-scrolled .header-wrapper {
  background: rgba(255, 255, 255, 0.10) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.section-header,
.header-wrapper {
  transition: background-color 200ms ease, background 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease;
}
12

Hi, this worked perfectly. Thank you so much.

Also, I’m using a menu app, and on desktop the main menu items are displaying with a black background. Would you know how to force the menu background to stay transparent at all times on desktop only? menu colors should be black

Preview link: https://mvjpqc80f2gp2ocz-64748617967.shopifypreview.com

Screenshot 2026-01-05 at 23.26.50
Screenshot 2026-01-05 at 23.26.501920×1082 246 KB