Sticky headers, cookie banners and pop-ups on mobile

Updated October 17, 2026 · Covers: Sticky bars take up a lot of space A pop-up covers the content

On a desktop monitor a 90px sticky header barely registers. On a phone in landscape, or on a small phone with the browser's own toolbars showing, the same header plus a chat bubble, a cookie banner and an "Install our app" bar can leave a narrow slot for the actual page. This guide covers two related problems: sticky elements that permanently take up too much of the screen, and pop-ups that cover the content as soon as the page opens.

What it means

Sticky bars are elements with position: fixed or position: sticky that stay on screen while the page scrolls: headers, bottom navigation, promo strips, cookie bars, floating "Buy" buttons. Each is reasonable on its own; together they add up.

Pop-ups and interstitials are dialogs that appear over the content: newsletter sign-ups, discount offers, app install prompts, consent dialogs. They become a problem when they cover most of the screen on arrival and are hard to dismiss on a touch screen.

Why it matters

Screen height is the scarcest resource on a phone. The browser's address bar and toolbar already take part of it, and the on-screen keyboard takes much more when a form field is focused. Every pixel of sticky UI is permanently subtracted from reading space. Pop-ups are worse: the visitor came for your content, and the first thing they see is something else, often with a close button too small to hit.

Google's Search documentation on page experience discourages intrusive interstitials on mobile: pop-ups that cover the main content right after someone arrives from search or while they're reading, and standalone screens that must be dismissed before the content is reachable. It also notes that dialogs required by law, such as cookie consent or age verification, and banners that take a reasonable amount of space and are easy to dismiss, are acceptable when done responsibly.

How MobileCheck finds it

MobileCheck emulates each device with its real viewport and the space taken by the browser's own bars, then looks at fixed and sticky elements on the first screen:

• Sticky bars take up a lot of space: we add up the screen area covered by fixed and stuck sticky elements. If together they cover more than 25% of the screen, each one is highlighted with its share.
• A pop-up covers the content: before checking, we try to close cookie banners and pop-ups the way a visitor would, using common "Accept" buttons and close buttons. If a large fixed overlay is still covering the page and we couldn't close it, we report it, hide it, and check the rest of the page underneath.

The menu scenario also catches menus that open without a reachable close button or with crowded links; see tap target size.

How to fix sticky headers

Make the header compact on phones

A mobile header needs a logo, a menu button and maybe one action. Move secondary links into the menu and drop the promo strip on small screens:

.site-header {
  position: sticky;
  top: 0;
  min-height: 56px;
}
@media (max-width: 40rem) {
  .header-promo, .header-secondary { display: none; }
}

Hide it while scrolling down

A common pattern is to slide the header away when the visitor scrolls down to read, and bring it back when they scroll up:

.site-header { transition: transform 0.2s; }
.site-header.is-hidden { transform: translateY(-100%); }

Toggle the class from a small, passive scroll listener. Use transform rather than changing height, so the content below doesn't jump.

Don't stack bars

If you have a bottom navigation bar, you probably don't also need a sticky header, a floating chat button and a fixed promo strip. Pick the one that matters most on mobile.

Remember that sticky elements also compete with the on-screen keyboard. When a visitor focuses a form field, a fixed bottom bar can end up sitting right above the keyboard and covering the field they're typing into. Test your forms with the keyboard open, and consider hiding non-essential fixed bars while an input has focus.

Respect safe areas

On phones with rounded corners and a home indicator, a bottom bar should leave room for the system UI. With viewport-fit=cover in your viewport tag, pad fixed bars with the safe-area insets:

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

How to fix pop-ups and banners

• Don't show it on arrival. Wait until the visitor has read or scrolled, or show it on exit intent on desktop only. A sign-up offer is more welcome after someone has seen the content.
• Use a banner, not a full-screen overlay. A cookie notice can sit at the bottom and take a modest part of the screen while the page stays readable and scrollable.
• Make closing easy. A real <button> with an accessible name, at least 44×44px, inside the visible area. Also close the dialog on Escape and on tapping the backdrop where it makes sense.
• Don't lock scrolling for non-essential pop-ups, and never position the close button where it ends up off-screen on short viewports.

<dialog id="offer" aria-labelledby="offer-title">
  <h2 id="offer-title">10% off your first order</h2>
  <form method="dialog">
    <button class="close" aria-label="Close">×</button>
  </form>
</dialog>

The native <dialog> element handles Escape and focus for you, and a form method="dialog" button closes it without any script.

How to check the fix

Run the free check with a small phone such as the iPhone SE and a tall one; the report shows what share of the screen your sticky elements take. Then open the page in the phone window, scroll, rotate to landscape, and try closing every banner with a tap. Landscape is where sticky headers most often take over the screen. You can compare common screen heights in the mobile viewport sizes list.

Related guides