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!

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!

I couldnt find a working answer in the forum yet.

I’m using an Astra Theme and would like to have the background image like on the homepage right at the beginning of the page, with the Header in front and also the first heading.

But unfortunately this is not working on other pages, even though I have the “transparent header” activated. How can I do it on the other pages? There I have the header with nothing & if I put in a background image, it starts BELOW the header, not included.

I would really appreciate some tipps.

Thanks a lot!

I couldnt find a working answer in the forum yet.

I’m using an Astra Theme and would like to have the background image like on the homepage right at the beginning of the page, with the Header in front and also the first heading.

But unfortunately this is not working on other pages, even though I have the “transparent header” activated. How can I do it on the other pages? There I have the header with nothing & if I put in a background image, it starts BELOW the header, not included.

I would really appreciate some tipps.

Thanks a lot!

I’ve checked the documentation at https://wpastra.com/docs/transparent-header-for-hfb/ but it doesn’t provide a solution for completely disabling the transparent header.

Please provide a direct answer on how to disable this feature globally. Do not suggest disabling it on individual pages or pretend not to understand my request. I’m specifically asking for a way to turn off the transparent header functionality across the entire site, on all devices, without having to manage it page by page.

If there is no built-in option to achieve this, please state so clearly and, if possible, suggest alternative methods (e.g., custom CSS or PHP code) that could accomplish this goal.

Again, if it isn’t possible to completely “undo” or turn off site-wide, after enabling… just say so.

I’m using this code to display a full width background image with a transparent header.

.page-id-123 .site-header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
} 

It works great, but I’m also using a full width and full height (100%vh) to display text and hero image. Using this code, the container gets pushed upwards and it’s no longer vertically centered.

Now I was able to fix it by adding padding to the container (and changing the amout of padding based on the screen size), but is there a better way to do it?

Some internal page –> perfect

Post –> ugly

Thanks in advance!