Dawn 15.4 Glassmorphism Header: Logo error

[crepscity]

Hey everyone,
I’m using Dawn 15.4.0 and I’ve added a glassmorphism header, but I’m running into an issue with the logo color on scroll.

I’m using JavaScript to apply a glass/blur effect to the header on scroll and to change the logo color.

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)

• On initial page load, the logo isn’t visible at the top because it loads as a black logo on a black header
• The logo should be white at the top, but that initial state isn’t applied
• As soon as I scroll even slightly, the logo appears and turns black (which is correct)
• After that, scrolling up and down works normally

Since the homepage behaves exactly as expected, I’m guessing this is a small JavaScript timing or initialization issue on non-homepage pages.

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

[devcoders]

@crepscity

Okay, which JavaScript code did you use? Can you please send it to me?

[SealSubs-Roan]

Hi @crepscity

You are just getting the load state problem. On templates other than the homepage, the scroll handler is invoked before the initial header state is applied. Execute your logo color logic on DOMContentLoaded and page load, not just on scroll. Verify also the template condition and force the top state when scrollY=0, always consistently.

[crepscity]

Hi,

I put this java 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();
}
})();

Also, put some code in header.liquid to add the glassmorphism header effect.

[crepscity]

I’ve also noticed an issue on the mobile version: the hamburger menu icon isn’t visible on page load because it’s black on a black background. It only becomes visible after scrolling.

[devcoders]

Hi @crepscity

Is your issue still not resolved?

[crepscity]

Hi, not yet was waiting for you to help me fix this issue.

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

[devcoders]

Hi @crepscity

Please share the collaborator code and email your issue details to me.