Sticky Header Background Not Working as Expected on Scroll – Astra Theme with Cu

Hey everyone! I’m struggling with my site’s sticky header. I want it to be transparent at the top and get a background color when scrolling, but:

1. The menu and logo stick, but the background doesn’t follow—it stays behind.
2. The header is supposed to be transparent on load but shows up white instead.

Here’s the CSS and JS I’m using:

In Additional CSS

/* Sticky Header */ .ast-main-header-wrap { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; background-color: transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .site-content { padding-top: 100px; } .ast-main-header-wrap.scrolled { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

JS in Insert Headers and Footers:

document.addEventListener("DOMContentLoaded", function() { var header = document.querySelector(".ast-main-header-wrap"); window.addEventListener("scroll", function() { if (window.scrollY > 50) { header.classList.add("scrolled"); } else { header.classList.remove("scrolled"); } }); });

Any idea what I’m doing wrong? Thanks! ??

The page I need help with: [log in to see the link]