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!

Looking forward to continue to use this plugin in the future.

I want to also compile and build the ./src/index.js file with all blocks. However, when I add ./src/index.js to the wp-scripts command, like wp-scripts start src/index.js, the blocks are not building. When I use wp-scripts start only, then the index.js file is not built.

How can I modify the webpack.config.js file to merge the configurations for building the blocks and the index.js file so that they can be built simultaneously using wp-scripts start?

However, for protected posts, WordPress scales the thumbnail image:

It actually works fine whenever I install the theme and view my site but when I go back to the homepage after viewing another post or a page, that happens.

Is there anyway I could stop this from happening? I was assuming the templates and stuff for password protected posts were the same for public posts.

I know how to develop a WordPress theme and I know how to use Ajax to load data from REST API.

My problem is here:
I don’t know how to create a WordPress theme that loads pages using AJAX.

in a normal theme, we create index.php, home.php, and for example page.php.
Now If I use AJAX it will just use index.php and I can’t change HTML using page.php because it will never open page.php it loads data from REST API and loads it inside index.php or home.php

Please tell me:
1. How to stop WordPress from loading page.php to avoid reloading the page and just loading data from REST API.

2. How to change the HTML of a page when loading page data with Ajax.

3. Is there any simple WordPress theme that uses Ajax to load pages to learn from it?

4.I don’t want to use admin-ajax.php.

Thanks