Do you want to shrink the sticky header when users scroll down the page? Shrinking the header on scroll helps keep your design clean and gives more space to your content. It’s a great way to keep navigation visible without taking up too much room.
With the Sticky Header Effects for Elementor plugin, you can easily reduce the height of an Elementor sticky header on scroll.
To check the complete feature overview documentation of Sticky Header Effects for the Elementor plugin, click here.
Requirement – This feature is a part of Sticky Header Effects for Elementor plugin, make sure its installed & activated.
To do this, add the Elementor Container widget, then design the header content as per your requirements or use a header template and follow the steps –
1. Select the main Container widget of the header, and make sure to set a minimum height in the Min Height section.
2. After that, go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle.
3. Enable the Shrink Header toggle.
4. Then, in the Header Height (px) field, you have to add the header height (in pixels) that you want on scroll.
Note: The header will not shrink smaller than its inner content.
Now, when you scroll down, the sticky header will shrink to your specified height.
