Sticky Header Effects


Sticky Header Effects for Elementor adds features and functionality to the Elementor Pro Page Builder’s sticky header feature.

Create custom header that's perfect for you

You can change the header background color, height, logo size, and bottom border when the visitor starts scrolling down the page.


Options On Scroll

The scrolling distance is adjustable for the best results in any situation

Transparent Header

Makes the initial background color transparent and places the header over the top page section without the use of negative margins

Section Height

Fully responsive and allows for a “shrink” effect to maximize space and achieve a slim style without losing functionality

Shrink logo

Ability to adjust the logo height after scrolling

Background Color

Change the color of the header when the visitor begins to scroll down. Full HEX, RGBA, and Color Name support

Bottom border

Upon scrolling the border thickness and color can be changed

Coming Soon

Replace logo

Change logo image entirely. Especially usefully when using transparent header

Entrance animations

Slide-in and fade-in animations with animation duration

Hide elements

Hide or show header elements after scrolling

Bottom Shadow

Add or remove box shadow effect upon scrolling with color, horizontal, vertical, blur, and spread controls

Custom Icon

Completely customize the mobile menu icon and add transition animation

Split menu

Menus that will split to allow center logo


The options panel is built right in to Elementor Pro’s advanced tab, right where they should be.