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.
What It Does
The Navigation Menu widget in The Plus Addons for Elementor includes a built-in Sticky Menu option. Combined with a smaller Inner Padding value set on its Sticky Main Menu style tab, the same header shrinks to a shorter height the moment a visitor scrolls past it, then returns to full size at the top of the page. No custom JavaScript or CSS is required.
Why It Matters
A full-height header that stays full-height while scrolling eats into the visible content area on every page. Shrinking the header on scroll keeps navigation reachable without permanently blocking the reading area, which matters most on long-form pages and tall hero sections where every extra pixel of vertical space counts.
What You Get
- A header that automatically shrinks in height once the visitor scrolls, using the same Navigation Menu widget already in the header template
- Independent padding control for the sticky (shrunk) state versus the default (full-height) state, set from two separate Style tabs
- No extra plugin, custom CSS, or JavaScript snippet needed
Benefits
- 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
Capabilities
- Sticky Menu toggle (Extra Options tab) turns the header into a fixed, always-visible bar on scroll
- Sticky Main Menu style tab holds a separate Inner Padding control, independent from the Main Menu tab’s padding
- Works with any Menu Direction and Menu Type combination since the shrink effect comes from the padding difference, not the menu layout itself
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
How It Works
When Sticky Menu is enabled, the widget applies a separate class to the header once the visitor scrolls past it. That class picks up whatever styling is set on the Sticky Main Menu tab instead of the Main Menu tab. Setting a smaller Inner Padding value there, compared to the Main Menu tab, is what produces the shrink: the header itself does not resize, its padding does.
How to Use It
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 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.
Learn via Video Tutorial
Use Cases
- 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
Also Read: How to Make a Sticky Table of Contents in Elementor to add section navigation alongside a compact sticky header.
Limitations
- The shrink comes purely from the Inner Padding difference between the Main Menu and Sticky Main Menu style tabs; there is no dedicated animation-duration or easing control for the shrink transition itself
- A header without a background color set can look visually broken while shrinking since the transparent area behind the menu is visible during the transition
- The effect only fires once Sticky Menu is enabled; without it the header keeps its normal height at all scroll positions
Troubleshooting
- Header behaves strangely on mobile – reported on a live staging site; check whether a separate mobile-only header template or a theme mobile menu is overriding the sticky class on small screens.
- Header flickers or jumps in Chrome, Brave, or Edge when scrolling back to the top – a real reported case; test with the browser’s own hardware acceleration setting and any page-level scroll animation plugin disabled to isolate the cause before assuming the widget itself is at fault.
- Shrink does not happen at all with Navigation Menu in the header – a previously reported case traced back to Sticky Menu not being enabled on the correct widget instance; confirm the toggle is on for the exact Navigation Menu copy placed in the live header template, not a duplicate left in a draft template.
Also Read: How to Add Social Share in Elementor to add social sharing buttons to pages using this header layout.
Read Further: How to Change Logo in Sticky Header on Scroll in Elementor?
