# Transparent Header Over the Homepage Hero

> Lays the header over the first section of the homepage with a transparent background and white text, then switches to a solid header once visitors scroll.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: header, homepage, hero, scroll
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-transparent-header-over-hero/

## Code

```html
<style>
.wpide-overlay-header{position:fixed;top:0;left:0;right:0;z-index:999;background:transparent;color:#fff;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;}
.admin-bar .wpide-overlay-header{top:var(--wp-admin--admin-bar--height,32px);}
.wpide-overlay-header a{color:inherit;}
.wpide-overlay-header.is-solid{background:#ffffff;color:#111827;box-shadow:0 2px 12px rgba(0,0,0,.08);}
@media (prefers-reduced-motion:reduce){.wpide-overlay-header{transition:none;}}
</style>
<script>
(function () {
    if (!document.body.classList.contains('home')) { return; }
    var header = document.querySelector('header.wp-block-template-part, .site-header, #masthead');
    if (!header) { return; }
    header.classList.add('wpide-overlay-header');
    var toggle = function () { header.classList.toggle('is-solid', window.pageYOffset > 60); };
    window.addEventListener('scroll', toggle, { passive: true });
    toggle();
})();
</script>
```

## Notes

Works best when the homepage starts with a full-width Cover block. Adjust the solid colors and the header selector at the top.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Transparent Header Over the Homepage Hero" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/