---
title: "How to Create a Shrinking Header Effect in Elementor?"
url: https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/
date: 2024-04-16
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "A shrinking header gets shorter as soon as visitors scroll, so it takes less room while they read and still keeps the menu in reach. With the Navigation Menu widget..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Create-a-Shrinking-Header-Effect-in-Elementor_-1-1024x536.jpg
word_count: 473
---

# How to Create a Shrinking Header Effect in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget creates a shrinking header by making the sticky header use less padding than the normal header, with no code.
- Style > Sticky Main Menu controls the sticky state with Inner Padding for each top-level menu link and Sticky Padding for the whole header container.
- Navigation Menu is Pro only, and Navigation Menu Lite does not have sticky options; the header template must include the widget so the menu shows on every page.

A shrinking header gets shorter as soon as visitors scroll, so it takes less room while they read and still keeps the menu in reach.

With the Navigation Menu widget from The Plus Addons for Elementor, you get the effect by giving the sticky header less padding than the normal one. No code.

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type.

## How It Works

While the header is stuck, the widget uses the settings in **Style > Sticky Main Menu** instead of the normal ones. Two of them control the height:

| Setting | What it pads |
| ------- | ------------ |
| Inner Padding | Each top-level menu link |
| Sticky Padding | The whole header container |

Make them smaller than the normal values and the header shrinks as it sticks.

## Steps

- Build your header with the Navigation Menu widget in the same container as your logo and buttons.- In **Content > Extra Options**, switch on **Sticky Menu**.- Go to **Style > Sticky Main Menu** and set **Inner Padding** top and bottom lower than in **Style > Main Menu > Inner Padding**.- For a bigger change, set **Sticky Padding** (further down, under Section Background Options) lower than the container’s own padding.- Give the header a background, so the page doesn’t show through as it shrinks.

![Inner Padding in Style > Sticky Main Menu](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-sticky-inner-padding.webp)

![Sticky Padding for the whole stuck header](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-sticky-padding.webp)

Publish and scroll: the header gets shorter as it sticks.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=SvgdkSemHy8

## Limitations

- **Pro only.** Navigation Menu Lite has no sticky options.- **A big logo keeps the header tall.** Padding only shrinks the space around items. To use a smaller logo while stuck, see [how to change the logo in a sticky header](https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/).- **The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.**

## Troubleshooting

### The header doesn’t shrink

Check Sticky Menu is on in the Navigation Menu widget inside your live header template, and that the sticky Inner Padding is really smaller than the Main Menu one.

### The header jumps or flickers when scrolling back to the top

Turn off other scroll effects on the same container (Elementor Motion Effects, another sticky setting) and test again.

## Related Docs

- [Create a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)- [Hide the header on scroll down](https://theplusaddons.com/docs/hide-header-on-scroll-down-effect-in-elementor/)- [Change the logo in a sticky header](https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before I can create a shrinking header in Elementor?**
A: The shrinking effect depends on the Navigation Menu widget from The Plus Addons for Elementor, and it is part of the Pro edition. You also need a header template with the menu inside it so the effect appears across the site, plus a WordPress menu if you use the Default menu type. The key idea is simple: the sticky header uses smaller padding than the normal header, so it takes up less vertical space while people scroll.

**Q: Why isn’t my header shrinking when I scroll?**
A: The most common cause is that Sticky Menu is not enabled inside the Navigation Menu widget in your live header template. The other frequent miss is padding: the sticky Inner Padding must be smaller than the Main Menu Inner Padding, or there is no visible shrink. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH relies on those sticky settings to change the header height.

**Q: What’s the best way to make a shrinking header look more noticeable?**
A: A bigger change comes from lowering Sticky Padding, not just Inner Padding. Inner Padding affects each top-level menu link, while Sticky Padding controls the whole header container, so it has a stronger impact on overall height. The page also recommends giving the header a background so the page does not show through as it shrinks. That matters because transparency can make the effect look messy instead of intentional.

**Q: Does a shrinking header work with a big logo?**
A: A large logo can keep the header tall even when the sticky padding is reduced. The page points out that padding only shrinks the space around items, not the logo itself. If you want a smaller logo while stuck, use [how to change the logo in a sticky header](https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/). That is usually the cleaner fix when height is still too large after adjusting padding.

**Q: Why does my header jump or flicker when I scroll back to the top?**
A: That usually happens when another scroll effect is fighting with the shrinking header on the same container. Elementor Motion Effects or another sticky setting can conflict and cause visible jumps as you return to the top. Turning off those extra scroll effects and testing again isolates the issue fast. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH expects one clear sticky behavior per container.

**Q: Can I test this shrinking header effect inside Elementor editor?**
A: The editor is not a reliable test for this effect because it does not scroll like a real visitor page. The page says to check sticky effects on the published page instead. That matters because sticky headers depend on actual scrolling behavior, so what looks fine in the editor can behave differently once published.