# Unstick Fixed Headers When Pages Are Zoomed In

> Turns sticky and fixed headers into normal headers when the visible screen area is very small, such as at 400% browser zoom or on landscape phones, so they no longer cover most of the content.

- Type: CSS
- Runs: Site-wide header
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: zoom, sticky-header, reflow
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-unstick-header-when-zoomed/

## Code

```css
@media (max-height: 480px), (max-width: 320px) {
    .site-header,
    #masthead,
    header.wp-block-template-part,
    .sticky-header,
    .is-position-sticky,
    .elementor-sticky--active,
    header[class*="sticky"],
    header[class*="fixed"] {
        position: static !important;
        top: auto !important;
    }

    body {
        padding-top: 0 !important;
    }
}
```

## Notes

Add your theme's header selector if it is not in the list.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Unstick Fixed Headers When Pages Are Zoomed In" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/