Are you looking to shrink the logo in the sticky header when users scroll down the page? This effect keeps your header clean and less distracting while still showing your branding. It’s perfect for creating a modern, user-friendly experience.
With the Sticky Header Effects for Elementor plugin, you can easily shrink the logo in the 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, then go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle.
2. Then enable the Shrink Logo toggle.
3. After that, in the Logo Height (%) field, you have to set the logo width (in percentage) that you want on scroll.
Note: This will affect all the images in the header added using the Elementor Image and Elementor Site Logo widgets.
Now, when you scroll down, the logo will shrink to your specified width in the sticky header.
