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

## Key Takeaways

- The Plus Addons for Elementor requires the PRO version to access the shrinking header effect.
- The Navigation Menu widget must be activated in Plus Settings to create a shrinking header.
- Sticky Menu toggle must be enabled in the Extra Options tab to achieve the shrinking effect.

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

## Frequently Asked Questions

**Q: What should I do if the sticky header doesn't shrink when I scroll?**
A: If the sticky header isn't shrinking, first check if the Sticky Menu toggle is enabled in the Extra Options tab. If it's not activated, the shrinking effect won't occur. Additionally, ensure that you have set a smaller padding value in the Inner Padding section under the Style > Sticky Main Menu tab compared to the Main Menu tab. This padding adjustment is crucial for achieving the shrinking effect.

**Q: Can I use the shrinking header effect with Elementor's free version?**
A: The shrinking header effect requires the PRO version of The Plus Addons for Elementor, as it includes the necessary premium widgets. While you can use the free Elementor plugin, you must have The Plus Addons for Elementor installed and activated to access this feature. This setup is essential for creating a modern and sleek header design.

**Q: What settings work best for the shrinking header effect?**
A: For optimal results with the shrinking header effect, set a smaller top and bottom padding in the Inner Padding section of the Sticky Main Menu tab compared to the Main Menu tab. This difference in padding creates a noticeable shrinking effect as users scroll down the page. Additionally, ensure that a background color is applied to the header for better visibility.

**Q: Does the shrinking header effect work on mobile devices?**
A: The shrinking header effect is designed to work across devices, including mobile. However, it's important to test the header on various screen sizes to ensure that the layout and shrinking behavior appear as intended. Adjustments may be necessary to maintain usability and aesthetics on smaller screens.

**Q: How can I change the logo in the sticky header on scroll?**
A: To change the logo in the sticky header when scrolling, refer to the guide on [How to Change Logo in Sticky Header on Scroll in Elementor?](https://theplusaddons.com/docs//change-logo-in-sticky-header-on-scroll-in-elementor/). This process allows you to create a dynamic visual experience as users navigate your site, enhancing branding consistency.