Sticky Header Effects for Elementor


Sticky Header Effects for Elementor adds useful options that are missing from the “sticky” header feature introduced in Elementor Pro 2.0. Giving users the option to change the background color and height when the visitor starts scrolling down the page. This allows for a “transparent” menu effect that can become any color, semi-transparent or solid, once the visitor begins to scroll.

This plugin is cross-browser compatible and fully responsive. Meaning it will work on all browsers as well as tablets and mobile devices.

This plugin is meant to be an add-on to Elementor Pro page builder as it’s not a standalone plugin.


  • Options panel built-in to Elementor Pro’s advanced section options. – Settings are right where they should be without cluttering up your workspace.
  • Apply options on scrolling – The scrolling distance for the Sticky Header Effects to be applied is responsively adjustable for the best results in any situation.
  • Transparent Header – Uses position to move header section down on top of the page. No need for problem causing negative margins.
  • Header Background – Color options for header after scrolling with full HEX, RGBA, and Color Name support.
  • Bottom Border – Allows user to change the color and thickness of the bottom border upon scrolling.
  • Shrink – An effect which changes section min-height to maximize space and achieve a slim style without losing functionality.
    (Remember that the “shrink” effect is limited by the height and padding of the header content. See the F.A.Q.)
  • Shrink Logo – Ability to adjust the logo height after scrolling

Pro Features Coming Soon

  • Replace logo – Change logo image entirely
  • Entrance animations – Slide-in and fade-in animations with animation duration
  • Hide elements – Hide or show header elements after scrolling
  • Box shadow – Add or remove box shadow effect upon scrolling with color, horizontal, vertical, blur, and spread controls
  • Menu toggle animations – Entrance and exit animations for the mobile hamburger menu
  • Split menu – Menus that will split to allow center logo


Enjoy using Sticky Header Effects? Please consider making a donation
Every donation helps the continued development, maintenance, and support for this plugin.
Thank you very much your support!

Capturas de pantalla

  • Settings built-in to Elementor Pro.
  • Main settings panel.
  • Current effects settings.


Minimum Requirements

  • WordPress 4.9 or greater
  • PHP version 5.4 or greater
  • MySQL version 5.0 or greater

Installation Instructions

  • Make sure that you have installed Elementor Pro Page Builder. This is not a stand-alone plugin and ONLY works with Elementor Pro.
  • Install the plugin through the WordPress plugins screen directly or download the plugin and upload it to the plugin folder: /wp-content/plugins/.
  • Activate the plugin through the installation screen or the “Plugins” screen in WordPress
  • You can find Sticky Header Options for Elementor under a sections “Advanced” tab, directly under “Sticky Effect”.


Why isn’t the “shrink” effect working?

The header cannot shrink smaller than the objects inside of it!

The “shrink” effect is restricted by the size of the content in the header section. Such as logos, images, menus, widgets, and also all of the padding and margins of those elements. This also inclused the padding and margins of the sections and columns themselves.

To get the best “shrink” effect use these settings:
* Set the top and bottom padding to 0px on your sticky header section, column, and elements inside of it.
* Set a custom logo and other image height(you can leave the width blank for “auto”).
* Set the header section height to “min height” and adjust it to your desired height.

Basically what happens is that the content of the header is “too tall” to shrink down anymore.

Is this a standalone Plugin?

No. You cannot use Sticky Header Effects for Elementor by itself. It is a plugin for Elementor Pro.

Does it work with any WordPress theme?

Yes. It will work with any WordPress theme that is using Elementor Pro as a page builder.

Will this plugin slow down my website speed?

Sticky Header Options for Elementor is light-weight and you can also use only the options you want to use on your website for faster performance.


2 de Agosto de 2019
The plugin has a mobile bug. While I like the plugin itself, it doesn't turn off while on mobile. I have tried several different things but it still scrolls on mobile. If you could fix this issue I'd love to use this plugin Thanks.
26 de Marzo de 2019
After working with Robert I have this working and I really like it. There are still some formatting issues, but hopefully those will be resolved in the next update. Robert kindly provided some custom CSS for me to add to get around an issue.
1 de Marzo de 2019
This is exactly what I've been looking for, for so long!! Thank you, let me know when you pro version comes out, I'll pay to support your great work!!
13 de Enero de 2019
I can't wait for Split menu – Menus that will split to allow center logo. When will be next update ?
10 de Diciembre de 2018
Excellent job on the plugin so far, hopefully this is just a start. When going forward, please keep in mind some things that are pivotal to the effectiveness of a sticky header: 1. The ability to change navigation font color. Many sticky headers today are transparent on sites that have a large graphic in the background that is dark or has a dark overlay, going to a white sticky header. Obviously this can be managed with CSS but this will be a welcome addition with the other items, to make it a well rounded product. 2. The ability to change the orientation of the header when it is in default mode and sticky. This might be a little harder, as you have no idea what someone might stick in the header, but being able to rearrange and resize the header columns would really be beneficial. For instance, say you have a site with a large logo, as I am frequently seeing, with a much smaller logo for the sticky header. You could have the logo be in the middle as a focal point when the header is in default and then move to the right when in sticky... 3. This one is the biggest: The ability to swap out logos depending on default and sticky positions. Many logos are dark, and on a transparent background, they do not look good against the graphic behind them. So I will frequently make it white or invert it, just for that position and then use the colored/darker logo for the sticky header on the white background. Being able to have different headers, even different sized headers (for the option above) would be hugely beneficial. These things would make this hugely useful, and deserving of 5 stars, but this is a really good start on a project that could be really useful and lucrative to the creator.
Leer los 11 comentarios

Colaboradores & Desarrolladores

“Sticky Header Effects for Elementor” es software de código abierto. Las siguientes personas han contribuido a este plugin.


“Sticky Header Effects for Elementor” ha sido traducido en 1 idioma. Gracias a los traductores por sus contribuciones.

Traduce & #8220;Sticky Header Effects for Elementor” a tu idioma.

¿interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN , o suscríbete al log de desarrollo por RSS .

Historial de cambios


  • Fixed: Transition CSS


  • Fixed: Bugs


  • Added: Shrink Logo featured


  • Fixed: Hook on the new Elementor Pro 2.4.7 version


  • Removed: Stretched section condition


  • Added: Compatibility with the new Elementor 2.1.1 version
  • Fixed: JavaScript error


  • Removed: Sticky Header feature(Elementor fixed theirs)
  • Added: Transparent header feature
  • Added: Compatibility with the new Elementor 2.1 version
  • Added: Change javascript to external file
  • Fixed: Bugs


  • Fixed: Bugs


  • Fixed: Bug where section didn’t move to top of page


  • Added: Sticky header feature
  • Added: Bottom border feature
  • Fixed: Bugs with tablet and mobile responsive modes
  • Fixed: Padding issues when using the “shrink” effect


  • Initial stable release