---
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-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to create a shrinking header effect in Elementor? In this effect, the sticky header shrinks as you scroll down the page creating a sleek and modern look...."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Create-a-Shrinking-Header-Effect-in-Elementor_-1-1024x536.jpg
word_count: 278
---

# How to Create a Shrinking Header Effect in Elementor?

## 

- Requires Elementor FREE Plugin and The Plus Addons for Elementor PRO version for the shrinking header effect.
- Enables Sticky Menu toggle in the Extra Options tab to activate the shrinking feature.
- Adjusts Inner Padding values in the Style > Sticky Main Menu tab to achieve the desired header height on scroll.

Do you want to create a shrinking header effect in Elementor? In this effect, the sticky header shrinks as you scroll down the page creating a sleek and modern look.

### 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

To do this, add the Navigation Menu widget to the header template and set up the layout as per your requirement then follow the steps -

For instance, we’ve created a header with the Site Logo, Navigation Menu and Header Meta Content widgets of 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 Men**u 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.

***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/)*