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 recently installed the LiteSpeed Cache plugin on my WordPress site using the DIVI framework. However, I am encountering an issue where the site initially loads without the CSS styles applied. This results in the site displaying only the HTML structure for a few seconds, which can give the impression that the site has been compromised. While this is not the case, many visitors to https://patriciadalmeida.com.br/ have reported this as a concerning issue. Additionally, this problem negatively impacts the Core Web Vitals score on PageSpeed Insights.

Has anyone else experienced this issue? For reference, I followed the tutorial from this site to setup the LiteSpeed Cache plugin: https://lucidrhino.design/blog/litespeed-cache-plugin-settings-for-divi/

I would appreciate any assistance or advice on how to resolve this issue.

Thank you!

After updating our site to the new WordPress version we seemed to be getting some CSS issue where there is images or padding not properly showing like it did prior to the update

Note: We are using vanilla JS for our website. Only then the tab structure stops working.

After I updated this theme it changed completely my comment box, padding, caption fonts, placed a line above headers and maybe other things.

I had custom css for all those things, but I can see they’re still in my child theme and in the “Customize” page.

So to fix I have to create new css code? It’s not obeying the css in my child theme?

Thanks

PS my live site won’t show the issues because I restored a backup.