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

Hi everyone,

I’m facing an issue with the sticky header on my WordPress site using the Astra theme. I’ve added custom CSS and JavaScript to make the header sticky and change the background color when scrolling, but I’m running into a couple of problems:

1. The header logo and menu stick to the top when scrolling, but the background doesn’t stick—it stays behind, making the menu and logo appear with no background.
2. Even though I want the header to be transparent initially and have a background color only on scroll, the background still appears white on load.

Here’s the custom CSS I’ve applied:

css

/* Make the header sticky */ .ast-main-header-wrap { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Add padding to the body to avoid content overlap */ .site-content { padding-top: 100px; /* Adjust based on your header's height */ } /* Default transparent background */ .ast-main-header-wrap { background-color: transparent; } /* Background color and shadow when scrolling */ .ast-main-header-wrap.scrolled { background-color: rgba(255, 255, 255, 0.9); /* Adjust this as needed */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow for visibility */ }

The JavaScript in the Insert Headers and Footers plugin:

javascript

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"); } }); });

I’m not sure if I’m targeting the correct class for the entire header or if I’m missing something. Any advice on how to fix this so that the header behaves as expected (transparent on load and sticky with background color on scroll)?

Thanks for your help!

• This topic was modified 1 month ago by gmugabo.

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