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.
Opens WPIDE on
Code
@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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.