# Sticky Header That Shrinks on Scroll

> Keeps your theme's header pinned to the top of the screen and adds a shadow and smaller padding once the visitor scrolls down.

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

## Code

```html
<style>
.wpide-sticky-header{position:sticky;top:0;z-index:999;transition:box-shadow .2s ease,padding .2s ease;}
.admin-bar .wpide-sticky-header{top:32px;}
@media (max-width:782px){.admin-bar .wpide-sticky-header{top:46px;}}
.wpide-sticky-header.is-scrolled{box-shadow:0 2px 12px rgba(0,0,0,.12);padding-top:6px !important;padding-bottom:6px !important;}
</style>
<script>
(function () {
    var header = document.querySelector('.site-header, header.wp-block-template-part, body > header, #masthead');
    if (!header) { return; }
    header.classList.add('wpide-sticky-header');
    var toggle = function () { header.classList.toggle('is-scrolled', window.pageYOffset > 40); };
    window.addEventListener('scroll', toggle, { passive: true });
    toggle();
})();
</script>
```

## Notes

Change the selector in the script if your theme's header is not a <header> element or .site-header.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Sticky Header That Shrinks on Scroll" 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/