---
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-08-07
lang: en
author: "Aditya Sharma"
description: "A shrinking header effect makes the sticky header reduce in height as visitors scroll down the page, giving the site a cleaner, more modern look. The Navigation Menu widget in..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Create-a-Shrinking-Header-Effect-in-Elementor_-1-1024x536.jpg
word_count: 386
---

# How to Create a Shrinking Header Effect in Elementor?

## 

- The Navigation Menu widget in The Plus Addons for Elementor includes a built-in Sticky Menu option that creates a shrinking header effect without custom code.
- The setup uses the Layout tab to select Horizontal Menu, then enables Sticky Menu in Extra Options and sets smaller Inner Padding values in Style > Sticky Main Menu.
- The post says the effect fits business and portfolio sites, long-form content pages, and landing pages or homepages with a tall hero section.

A shrinking header effect makes the sticky header reduce in height as visitors scroll down the page, giving the site a cleaner, more modern look.

The Navigation Menu widget in The Plus Addons for Elementor includes a built-in Sticky Menu option that enables this effect without any custom code.

**Best Used For:**

- Business and portfolio sites where a full-height sticky header takes up too much screen space on scroll

- Long-form content pages where a compact sticky header keeps navigation visible without blocking the reading area

- Landing pages and homepages with a tall hero section that need a smoother visual transition when scrolling begins

### Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Navigation Menu widget is activated, to verify this visit Plus Settings → and Search for Navigation Menu and activate.

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

### Learn via Video Tutorial:

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

Add the Navigation Menu widget to the header template and set up the layout as per your requirement, then follow the steps.

For this example, the header includes the Site Logo, Navigation Menu, and Header Meta Content widgets from The Plus Addons for Elementor.

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.*

1. From the **Layout** tab, select **Horizontal Menu** from the **Menu Direction** section after selecting the appropriate **Menu Type**. Then add the appropriate menu.

2. After that enable the **Sticky Menu** toggle from the **Extra Options** tab.

3. Then go to **Style** > **Sticky Main Menu** tab, and set a smaller padding top and bottom value in the **Inner Padding** section than the value set in the **Main Menu** tab.

> *Note: Make sure you've added a background color to the header.*

Now when you scroll down the sticky header will shrink in height. To add section navigation alongside a compact sticky header, see [How to Make a Sticky Table of Contents in Elementor](/docs/make-a-sticky-table-of-contents-in-elementor/).

To add social sharing buttons to pages that use this header layout, see [How to Add Social Share in Elementor](/docs/add-social-share-in-elementor/).

***Read Further***: *[How to Change Logo in Sticky Header on Scroll in Elementor?](https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/)*