---
title: "How to Create a Shrinking Header on Scroll in WordPress?"
url: https://nexterwp.com/docs/create-a-shrinking-header-on-scroll-in-wordpress/
date: 2026-08-24
modified: 2026-08-24
author: "Aditya Sharma"
description: "Do you want your header to shrink as visitors scroll down? A shrinking header starts at its full height, then reduces to a compact bar once the page scrolls, so..."
word_count: 1130
---

# How to Create a Shrinking Header on Scroll in WordPress?

## Key Takeaways

- Nexter Blocks Container block creates a shrinking header in WordPress without custom code by using Sticky, Sticky Margin, and Padding fields on the Style tab.
- Normal + Sticky keeps the header full height first, then pins it to the top on scroll, while Sticky only does not leave a full-height state to shrink from.
- 30px normal padding and 10px Sticky padding show the shrink effect clearly, and the Sticky tab can also set Background, Border Radius, and Box Shadow for the sticky state.
- Sticky toggle is per device, so desktop, tablet, and mobile can each use different compact heights, with Padding from 0 to 1000 and Margin from -1000 to 1000.

Do you want your header to shrink as visitors scroll down? A shrinking header starts at its full height, then reduces to a compact bar once the page scrolls, so navigation stays within reach while the content gets more room on screen.

With the [Container block](https://nexterwp.com/docs/add-a-container-in-wordpress/) from Nexter Blocks, you can build a shrinking header in WordPress without any custom code. The Sticky option pins the header to the top of the screen, and the Sticky Margin and Padding fields on the Style tab set the tighter spacing it switches to.

**Best Used For:**

- Site headers where a tall logo area suits the first view but wastes vertical space once visitors start reading

- Landing pages where the call to action in the header has to stay visible without covering the content behind it

- Long articles and documentation pages where a compact navigation bar keeps scrolling comfortable

*To check the complete feature overview documentation of the Nexter Blocks Container block, [click here](https://nexterwp.com/docs/add-a-container-in-wordpress/).*

***Requirement – The Container block is a part of Nexter Blocks. The Sticky option used in this guide is a Pro feature, so make sure the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text) is installed and activated.***

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

## How Does the Shrink Effect Work?

The Container block stores two separate sets of spacing values. The container uses its normal padding while the page sits at the top, and it switches to the Sticky padding once it becomes sticky on scroll. Setting a smaller Sticky padding than the normal padding is what makes the header look like it shrinks.

So the recipe has two halves. First give the header a generous normal height, then give it a compact sticky height.

## How to Create a Shrinking Header on Scroll in WordPress?

Add the Container block to your header template, place the logo and menu inside it, and follow the steps.

### Set the Full Height of the Header

1. Go to **Layout** > **Layout** and set **Content Width** to **Full**, so the header spans the screen.

2. Go to the **Advanced** tab > **Spacing** and set the **Padding** for the header at rest. A larger top and bottom padding, for example 30px, gives you the tall starting state to shrink from.

> *Note: The Advanced tab options are common across all Nexter Blocks. To explore them, *[*view the Advanced tab tutorial*](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)*.*

### Make the Header Sticky

3. Go to the **Layout** tab, open the **Extra Options** panel, and enable the **Sticky** toggle. This toggle is per device, so use the responsive device switcher to turn it on for desktop, tablet, and mobile as needed.

4. From **Header Type**, select **Normal + Sticky**. The header stays visible at its full height first, then sticks to the top as you scroll, which is the behavior a shrinking header needs.

> *Note: Only Sticky keeps the container hidden until it reaches the top, so there is no full height state to shrink from. Use Normal + Sticky for a shrinking header.*

5. Set **Animation** to **None**. Slide and Fade bring the sticky header in as a fresh element, which hides the size change. With None the header stays in place and the spacing change reads as a shrink.

6. Leave the **On Mouse Scroll Up Sticky** toggle off, then set the **Top Offset** to control how far down the page the header sticks. Keep it at 0 to have it stick as soon as it reaches the top.

> *Note: When On Mouse Scroll Up Sticky is enabled the Top Offset field is hidden, because the header then appears only on an upward scroll.*

### Set the Shrunk Height With Sticky Padding

7. Switch to the **Style** tab and open the **Background** panel. Alongside the **Normal** and **Hover** tabs you will now see a **Sticky** tab. Open it.

8. In the **Padding** field, set a smaller top and bottom value than the normal padding from step 2. For example, drop 30px down to 10px. That difference is the shrink.

9. Use the **Margin** field if you want the sticky header to pull away from the edges, for example a small top margin and side margins to give it a floating look once it sticks.

Both fields accept **PX**, **EM**, and **%** units and are set per device, so you can use a different compact height on tablet and mobile. Padding accepts values from 0 to 1000, and Margin accepts values from -1000 to 1000.

> *Note: The Sticky tab appears only while Sticky is enabled for the device currently selected in the responsive device switcher. If you cannot see it, switch the preview back to that device or enable Sticky for the device you are editing.*

### Style the Sticky State

10. The same **Sticky** tab holds a **Background** field, where you can set a color, gradient, or image that applies only once the header sticks. A solid background here keeps the menu readable over the page content scrolling underneath, which matters if the header is transparent at rest.

11. Open the **Border/Box Shadow** panel on the same **Style** tab. It carries its own **Sticky** tab with **Border**, **Border Radius**, and **Box Shadow** fields. A soft box shadow on the sticky state lifts the shrunk header off the content and makes the transition easier to read.

Now save the page and scroll the front end. The header should start tall, then settle into a compact bar pinned to the top of the screen.

## Good To Know

- **Transition Duration(s)** applies to the Slide and Fade animations. With **Animation** set to **None**, the header uses the block's built in 0.3 second ease for the size change, so the field will not alter the shrink speed.

- The sticky header sits at the top of the screen on a layer above the page content. While you are logged in, the WordPress admin bar shifts it down so it does not sit underneath the bar. Log out or use an incognito window to see the real visitor position.

- Set the sticky padding for each device separately. A compact height that works on desktop can still be too tall on mobile, where screen space is tightest.

- With **Content Width** set to **Full**, the sticky padding cleanly replaces the container's normal padding. If you are using **Boxed**, check the result in the preview before publishing, as the sticky padding is applied to the inner content wrapper rather than the outer container.

- Enable the **Stay In Container** toggle only if you want the sticky behavior limited to the parent container. For a site header that spans the page, leave it off.

This is how you can create a shrinking header on scroll in WordPress with the Container block. To explore the related header options in Nexter Blocks, see the [Sticky Container](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/), [Transparent Header](https://nexterwp.com/docs/add-a-transparent-header-in-wordpress/), and [Change Background Color On Scroll](https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/) docs.

## Frequently Asked Questions

**Q: Why does a shrinking header need Normal + Sticky instead of Sticky only?**
A: Normal + Sticky is what gives the header two states: a full-height starting point and a compact sticky state. With Sticky only, the container stays hidden until it reaches the top, so there is no visible full-height phase to shrink from. In Nexter Blocks, that difference matters because the shrink effect depends on switching from normal padding to smaller sticky padding.

**Q: What should I change if the header is not shrinking on scroll?**
A: The shrink effect depends on the sticky state actually activating and having smaller spacing than the normal state. In Nexter Blocks, check that Sticky is enabled for the current device, Header Type is set to Normal + Sticky, and the Sticky Padding is smaller than the regular padding. If Animation is set to Slide or Fade, the size change can be visually masked.

**Q: Can I use a shrinking header on desktop, tablet, and mobile separately?**
A: The sticky behavior and spacing are set per device, so desktop, tablet, and mobile can each have different shrink behavior. That matters because a compact height that looks fine on desktop can feel too tall on mobile where screen space is tighter. Nexter Blocks also hides the Sticky tab unless Sticky is enabled for the device you are editing.

**Q: What is the best padding setup for a shrinking WordPress header?**
A: A larger normal padding and a smaller sticky padding create the cleanest shrink effect. The tutorial uses 30px as an example for the full-height state and 10px for the sticky state, which makes the change obvious without feeling jumpy. In Nexter Blocks, that spacing swap is what makes the header read as shrinking instead of just jumping into place.

**Q: How do I keep a sticky header readable over page content?**
A: A solid background in the Sticky tab helps when the header is transparent at rest, because content scrolls underneath it once it sticks. The same Sticky tab also lets you set a color, gradient, or image for that state. Adding a soft box shadow in Border/Box Shadow can make the compact bar stand out more clearly from the page below.

**Q: What kind of pages work best with a shrinking header?**
A: Shrinking headers fit pages where you want a tall header at first but less vertical waste once people start reading. The tutorial calls out site headers with large logo areas, landing pages where a call to action should stay visible, and long articles or documentation pages where compact navigation keeps scrolling comfortable. That makes Nexter Blocks a good fit for content-heavy layouts.