---
title: "How to Make a Sticky Container in WordPress?"
url: https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/
date: 2024-11-28
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "Some things should not scroll away: a call to action, a price, a set of navigation links. Once they leave the screen they stop working. A sticky container stays put..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Make-a-Sticky-Container-in-WordPress_-1024x519.jpg
word_count: 537
---

# How to Make a Sticky Container in WordPress?

## Key Takeaways

- Nexter Blocks Pro activa el bloque Container para que una sticky container funcione; sin él, la clase tpgb-sticky-enable no aparece y la sección se desplaza normalmente.
- La configuración sticky se guarda por dispositivo y por breakpoint, así que un sidebar puede quedarse fijo en desktop y seguir desplazándose en un teléfono.
- El offset separa la sticky container de un encabezado fijo, y dos secciones sticky en la misma página se superponen si sus offsets no se ajustan entre sí.

Some things should not scroll away: a call to action, a price, a set of navigation links. Once they leave the screen they stop working.

A sticky container stays put as the rest of the page moves past it.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/)

## Before You Start

- **Edition:** **Pro** — sticky containers needs Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block holding the content that should stay — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).

## Steps

- Select the **Container** you want to keep on screen.

- Switch **sticky** on for the devices where it should apply.

- Set the **offset** — how far from the top it should settle.

- Optionally give the stuck state its own background, padding or shadow so it reads as a bar.

- Publish and scroll the real page.

## How It Behaves

Sticky is written onto the container as a class, and the block's script takes over from there.

- **Measured on a published page:** with sticky on, the container rendered `tpgb-sticky-enable` alongside its normal container classes.- **It is per device.** The setting is stored per breakpoint, so a sidebar can stick on desktop and scroll normally on a phone — usually what you want, because a phone screen has no room to give away.- **The offset is what keeps it clear of a fixed header.** Without one, a sticky section can sit underneath the header.- **The stuck state can look different** — its own background and padding are separate settings, which is how a header becomes a compact bar. See the [shrinking header guide](https://nexterwp.com/docs/create-a-shrinking-header-on-scroll-in-wordpress/).- **Measured with Nexter Blocks Pro deactivated:** this effect disappears completely and the container renders as a plain section, with nothing on the page to say why.

## Limitations

- **Pro only** — measured with Nexter Blocks Pro deactivated, `tpgb-sticky-enable` is absent and the section scrolls away normally.- **Sticky costs screen space permanently.** On a phone a stuck bar can take a quarter of the window, which is why the per-device setting matters.- **A parent with its own overflow rule can break it.** If a sticky container refuses to stick, an ancestor is usually the reason.- **Two sticky sections on one page will overlap** unless their offsets are set to account for each other.- **It sticks within its parent.** A sticky container stops behaving once its containing section has scrolled past.

## Troubleshooting

### It does not stick at all

Check Nexter Blocks Pro is active — measured, the sticky class is not rendered without it. Then check sticky is switched on for the device you are testing.

### It sticks but hides behind my header

Increase the offset until the section settles below the header.

### It works on desktop but not mobile

Sticky is set per breakpoint. Switch it on for the phone breakpoint too, if you really want it there.

### It stops sticking part way down the page

It has reached the end of its parent container. Move it up the block tree so its parent spans the part of the page you want it to cover.

### Something on the page overlaps it

Raise the container's z-index in the Advanced tab — see [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/).

## Related Docs

- [Create a shrinking header on scroll in WordPress](https://nexterwp.com/docs/create-a-shrinking-header-on-scroll-in-wordpress/)- [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Change background colour on scroll in WordPress](https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What do I need before making a sticky container in WordPress?**
A: Nexter Blocks Pro is the key requirement, because the sticky class is only rendered when Pro is active. The page also assumes you already have a Container block holding the content you want to keep on screen. In Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter, that means sticky is not a standalone effect. It depends on the container block and the Pro-enabled sticky behavior.

**Q: Why does my sticky container not stick at all?**
A: The usual cause is that Nexter Blocks Pro is not active, because without it the sticky class is absent and the section scrolls away normally. The other common miss is device targeting: sticky has to be switched on for the breakpoint you are testing. In practice, that means a desktop test can fail even when the phone setting is off, since sticky is stored per device.

**Q: How do I stop a sticky container from hiding behind a fixed header?**
A: The offset controls this. A sticky container settles below the top by whatever offset you set, so increasing that value gives it room under a fixed header. Without an offset, the page can place the sticky section underneath the header instead of clearing it. That matters most when the header stays pinned while you scroll.

**Q: Should I make a sticky container stick on mobile too?**
A: Usually not unless you really need it there. Sticky is stored per breakpoint, and the page notes that a stuck bar can take up a quarter of a phone screen. That is why desktop-only sticky often makes more sense for sidebars or navigation, while mobile should stay uncluttered unless the content truly needs to remain visible.

**Q: Why does my sticky container stop part way down the page?**
A: Sticky only works within its parent container. Once that parent has scrolled past its end, the sticky behavior stops. The fix is structural rather than visual: move the container higher in the block tree so its parent spans the full section you want it to cover. That limitation is easy to miss when the page looks long enough but the parent wrapper is short.

**Q: How do I keep two sticky sections from overlapping each other?**
A: Their offsets need to account for one another. The page calls out that two sticky sections on one page will overlap unless their offsets are set with that in mind. A practical way to think about it is stacking space: each stuck element needs enough clearance so it does not collide with another one already pinned in view.