Sticky Header Effects for Elementor

Descripción

The original Elementor sticky header & sticky menu plugin. Transparent, fixed & scroll effects (blur, shrink, hide) on Elementor Free or Pro.

Sticky Header Effects para Elementor: construye cabeceras fijas inteligentes y adaptables

Sticky Header Effects for Elementor is the plugin for turning any Elementor header into a smart, scroll aware sticky header. Add a sticky menu, a transparent header, a fixed header, and 12 scroll based features like blur, shrink, hide on scroll and color change, all with no code, on Elementor Free or Pro.

Trusted by 300,000+ websites with 5.4 million+ downloads and rated 4.5 stars, it is the sticky header plugin agencies, designers and site owners reach for first.

Live Demos | Documentation | Get Pro

Why 300,000+ Sites Choose Sticky Header Effects

  • The original. The plugin that made sticky header effects easy for Elementor, refined over years and 5.4M+ downloads.
  • Works on Elementor Free. You do not need Elementor Pro. Every free effect runs on Elementor Free or Pro.
  • No code. Everything lives in a simple panel inside the Elementor Advanced tab. No CSS, no JavaScript, no snippets.
  • Responsive control. Tune behavior and thresholds per device.
  • 50+ ready templates. Import a proven header and go live in minutes.

Tested, Maintained, and Supported

Sticky Header Effects is actively maintained and backed by real support, with docs and live demos to get you set up fast. You get a reliable, responsive sticky header without writing or maintaining a single line of code.

Built Light, No Bloat

Performance is a feature. The effects run on a lightweight vanilla JavaScript engine that only does work when you actually enable a sticky effect on a header. No heavy libraries are forced onto every page, and nothing loads where it is not used. Your Core Web Vitals stay yours.

Free vs Pro

The free plugin gives you the core sticky header toolkit. Sticky Header Effects for Elementor Pro is a separate add on that layers 12 advanced, scroll based features on top.

Included in Free (11 features):

  • Header scroll distance threshold
  • Transparent header background
  • Dynamic background color change
  • Bottom border and shadow styling
  • Header shrink on scroll
  • Logo shrink on scroll
  • Logo color change on scroll
  • Blur background (backdrop)
  • Hide header on scroll down
  • Back to Top button
  • Fix Anchor Scroll (offset in-page anchor links)

Added in Pro (12 advanced features):

  • Display Conditions (show and hide by page, post, role, URL and more)
  • Sticky Until (release at a container, page end, element or scroll distance)
  • Reveal and entrance animations (9 effects)
  • Header Replace on scroll (a different header look when sticky)
  • Logo image swap (with retina)
  • Sticky menu styling (5 menu types)
  • Extended backdrop filters (grayscale, brightness, contrast, hue)
  • Background image on sticky
  • Header opacity transition
  • Logo styling on sticky
  • Multi-Sticky coordination (up to 5 sticky sections)
  • Scroll Progress Bar (reading progress on the header or the browser edge)

11 Powerful Elementor Sticky Header Features

1. Efecto de distancia de desplazamiento de la cabecera

Set Scroll Trigger Threshold
Define how far the user scrolls before sticky effects activate. Perfect for precise control over header behavior.
Live Demo

2. Efecto de fondo de cabecera transparente

Overlay with Elegance
Allow your header to overlay your hero or banner sections with full transparency. Ideal for modern homepage designs.
Live Demo

3. Cambio dinámico del color de fondo

Auto Background Switching
Change your header background color on scroll to match different sections or maintain contrast.
Live Demo

4. Efecto de estilizado del borde inferior

Subtle Section Separation
Add customizable borders below your sticky header for better definition and clean design.
Live Demo

5. Efecto de reducción de la cabecera

Reduce Header Height Dynamically
Shrink the entire header after scrolling to save space and focus attention on the page content.
Live Demo

6. Efecto de reducción del logotipo

Responsive Logo Transition
Shrink the logo proportionally during scroll, maintaining visual balance and brand presence.
Live Demo

7. Efecto de cambio de color del logotipo

Switch Logo Color for Better Contrast
Automatically switch to a contrasting logo color on scroll based on background or user behavior.
Live Demo

8. Efecto de desenfoque de fondo

Add Modern Blur Transition
Enhance the visual flow by applying a subtle blur effect to the background of your sticky header.
Live Demo

9. Efecto de ocultar la cabecera al desplazarse hacia abajo

Hide and Reappear on Scroll
Auto-hide the header when scrolling down and show it again on scroll up. Great for content-heavy pages.
Live Demo

10. Back to Top Button

Return to the Top in One Click
Add a floating Back to Top button that appears once the visitor has scrolled past a distance you set, then smooth scrolls back to the top. Position, size, radius, colors and edge offset are all yours.

11. Fix Anchor Scroll

Anchor Links That Land in the Right Place
Stop a sticky header from covering the section an in-page anchor link jumps to. The offset follows the real header height automatically, with an extra gap control and optional smooth scrolling that respects a reduced motion preference.

Sticky Header Effects PRO: 12 Advanced Features

Want more control? Sticky Header Effects for Elementor Pro is a separate add-on that builds on top of this free plugin. It adds 12 advanced, scroll-based header features:

1. Condiciones de visualización (PRO)

Show or hide the sticky header on specific pages, posts, taxonomies, roles, login state, URLs and more.
Live Demo

2. Fijo hasta (control de límite) (PRO)

Release the sticky at a container, page end, custom element, or scroll distance.
Live Demo

3. Animaciones de revelado o entrada (PRO)

9 entrance effects (slide, fade, zoom, flip) when the header becomes sticky, with duration, easing and delay.
Live Demo

4. Sustitución de la cabecera al desplazarse (PRO)

Show a completely different header look when sticky, built from a normal and a sticky version in one header (no second template).
Live Demo

5. Intercambio de imagen del logotipo (PRO)

Swap to a different logo image (with retina @2x) when the header becomes sticky.
Live Demo

6. Estilizado del menú fijo (PRO)

Restyle nav menu colors, typography and spacing only while sticky (Elementor, Mega Menu, WordPress Menu and TPAE Nav Menu).
Live Demo

7. Filtros de fondo extendidos (PRO)

Add grayscale, brightness, contrast and hue-rotate on top of the free blur backdrop.
Live Demo

8. Imagen de fondo al fijarse (PRO)

Show a background image only while the header is sticky, with full position, size, repeat and attachment controls.
Live Demo

9. Transición de opacidad de la cabecera (PRO)

Smoothly fade the header opacity between its normal and sticky states.
Live Demo

10. Estilizado del logotipo al fijarse (PRO)

Add padding, border, radius and box-shadow to the logo only while sticky, with a smooth transition.
Live Demo

11. Coordinación de múltiples elementos fijos (PRO)

Coordinate up to five sticky sections on one page in Stack or Sequential modes, with priority ordering.
Live Demo

12. Scroll Progress Bar (PRO)

Show a reading progress bar that fills as visitors scroll, attached to the header or pinned to the browser edge, with thickness, fill and track colors, radius and a smooth fill control.
Read Docs

Get Sticky Header Effects Pro, backed by a 60-day money-back guarantee.

Check Our Other Products

The Plus Addons for Elementor – Get 120+ unique Elementor widgets, Elementor templates, and more.

Nexter Blocks – Nexter Theme works in sync with core Gutenberg. Add 90+ powerful, highly customizable blocks.

NexterWP Theme – Best and lightest starter theme for WordPress and Elementor.

Nexter Extension – Power up your WordPress website with 20+ extensions for layout, performance, security and more.

UiChemy – Figma to Elementor Converter – Convert your Figma templates into live Elementor websites using our Free Figma Plugin.

WDesignKit – 1000+ templates, Elementor and Gutenberg widget builder, cloud storage, widget to block converter and more.

SproutOS – A modern WordPress plugin that helps site owners, agencies and developers work faster with AI-powered tools, automation and workflow controls.

Servicios externos

Sticky Header Effects para Elementor puede conectarse a los servicios externos que se indican a continuación solo cuando la característica correspondiente está activada:

  • api.posimyth.com: usage analytics. Off by default; submitting the deactivation feedback form also sends it, plus your admin email if you tick the contact box. Terms · Privacy · what is shared

  • stickyheadereffects.com, posimyth.com: header template and preset listings, requested by the plugin’s dashboard on your behalf. Terms · Privacy

  • store.posimyth.com: newsletter opt-in, only when you submit the Get Updates or dashboard subscribe form. Sends the email address you type, plus the name if you use the dashboard box. Terms · Privacy

  • wdesignkit.com: ready-made header presets and preview images, delivered through the free WDesignKit companion plugin. Terms · Privacy

  • downloads.wordpress.org: Rollback Manager downloads of a previous plugin version from the WordPress.org plugin directory, only when you start a rollback. Privacy

If the separate Sticky Header Effects for Elementor Pro add-on is installed, it also validates its license key with store.posimyth.com. That flow is disclosed in the Pro plugin.

Capturas

Instalación

How to Install Sticky Header Effects for Elementor in 3 Easy Steps

  1. Asegúrate de que Elementor (Gratuito o Pro) esté instalado y activado.
  2. Instala el plugin Sticky Header Effects para Elementor desde el repositorio de plugins de WordPress.
  3. Open any page with Elementor, select a container or section, go to the Advanced Tab, and enable Sticky Header Settings.

FAQ

¿Por qué no funciona el efecto «encoger»?

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 includes 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.

Básicamente, lo que ocurre es que el contenido de la cabecera es «demasiado alto» para seguir reduciéndose.

¿Necesito Elementor Pro para usar este plugin?

No. This plugin works perfectly with Elementor Free. For navigation menus, you can use the free Nav Menu widget from The Plus Addons for Elementor. You will only need Elementor Pro if you are using Pro Navigation widgets.

¿Funciona con el constructor de temas de Elementor?

Yes. You will find the Sticky Header Effects panel under the Advanced Tab of every Elementor section and container. If you have Elementor Pro, it works on header templates built with the Elementor Pro Theme Builder. On Elementor Free you do not need Elementor Pro to build a custom header either: Nexter Extension includes a Free Theme Builder for headers, and the same Sticky Header Effects apply to those headers too.

Does it work with Elementor’s new Atomic Elements (V4) editor?

Not yet. Atomic Elements is an unreleased Elementor experiment, and atomic elements do not expose the Sticky Header Effects panel. If you have that experiment turned on, build your header with a classic Container and every effect works as normal. Nothing changes for sites on the current Elementor 3.x releases.

¿Es un plugin independiente?

No, it requires Elementor Free or Pro. It extends Elementor’s functionality with new header scroll effects.

¿Existe una versión Pro de este plugin?

Yes. Sticky Header Effects for Elementor Pro is a separate add-on plugin that requires this free plugin to be installed and active. It adds Display Conditions, Sticky Until (boundary control), Reveal animations, Header Replace on scroll, Logo Swap, Sticky Menu Styling, extended Backdrop Filter, Background Image on sticky, Opacity transitions, Logo Styling, Multi-Sticky coordination, and a Scroll Progress Bar. All of the free effects continue to work exactly the same with or without Pro installed.

¿Cuál es la diferencia entre Sticky Header Effects Pro y Elementor Pro?

They are unrelated products. Elementor Pro is Elementor’s own premium plugin (widgets, theme builder, etc.). Sticky Header Effects for Elementor Pro is our add-on that extends this specific plugin’s sticky header effects, and works with either Elementor Free or Elementor Pro.

¿Dónde puedo encontrar los ajustes de Sticky Header Effects?

Inside Elementor Editor, select any container, go to the Advanced Tab, and scroll to the Sticky Header Effects section.

¿Funcionará este plugin con cualquier tema de WordPress?

Sí, funciona bien con la mayoría de los temas optimizados para Elementor, incluyendo Hello, Nexter, Astra y más.

¿Ralentizará esto mi sitio web?

Not at all. It is highly optimized for performance and coded lightweight to ensure fast page loads.

¿Cómo puedo informar de errores de seguridad?

Puedes informar de errores de seguridad a través del programa de divulgación de vulnerabilidades de Patchstack. El equipo de Patchstack ayuda a validar, clasificar y gestionar cualquier vulnerabilidad de seguridad. Informar de una vulnerabilidad de seguridad.

Reseñas

Top

19 de septiembre de 2026
<span style="font-size: inherit; color: inherit;">Well done!</span><div style="color: inherit">I've been using it for two years now, and honestly, it works really well—with plenty of settings to customize it for different websites.The “Back to Top” button is greatThank you for all the work you do</div>
27 de noviembre de 2025
This was my first time using this plugin, but I encountered a problem that the plugin couldn't solve. I checked their YouTube tutorials but couldn't find the solution I needed. On a whim, I left a message asking for help, and to my surprise, they replied very quickly, telling me to submit a support ticket. I did, and their technical support responded quickly and helped me solve my problem. The key point is that I hadn't used any of their Pro versions; they helped me resolve my issue for free. I'm very grateful and highly recommend it to everyone.
25 de agosto de 2025
We have been using Sticky Header Effects for Elementor for a while now and it’s been a great help in our projects. The latest version has a few more ads, but overall the plugin works smoothly. It also helped us find Nexter Extension, which we now use on all our WordPress sites. We’ve shared some feedback in their survey and are looking forward to more awesome updates from the team. Highly recommended for anyone using Elementor.
10 de julio de 2025 1 respuesta
What a shame! This used to be a very useful, simple, and straightforward plugin. Once upon a time it didn't add any marketing features to your dashboard, didn't try and upsell you on PRO features or other plugins. The plugin developer either sold it to someone else or gave up its rights as of v2.1.0 it now it does exactly the opposite of that, I clicked 2-3 buttons that installed another plugin "WPDesignKit" and they're constantly trying to shove other plugins and upsells down your throat in the plugin's new dashboard and your WordPress dashboard. You can roll the plugin back to earlier versions, but then you're missing out on the alleged "Bug fixes and Improvements" in their updates and dealing with (1 Plugin needs to be updated) notices…. I am using it on version 1.7.8 – the last good version.
24 de mayo de 2025
The sticky panel feature is incredibly useful. I added it to a sidebar for important links, and it works flawlessly across all screen sizes. It keeps the user experience smooth and professional. Great plugin!
18 de mayo de 2025
Ups and downs over time in development, also this tool mentions:IMPORTANT: This plugin does NOT control the sticky position of the header. Please use the above Motion Effects tab sticky options to make the header sticky. but the opposite is true, if you do activate Elementor's Sticky Menu option your menu will mess up and not return to full width upon window size changes. It took me some time to figure this out. I was about to ditch the plugin. Please devs, remove this mention.
Leer todas las 68 reseñas

Colaboradores y desarrolladores

«Sticky Header Effects for Elementor» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Sticky Header Effects for Elementor» está traducido en 11 idiomas. Gracias a los traductores por sus contribuciones.

Traduce «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 registro de desarrollo por RSS.

Registro de cambios

2.2.3

  • Added: Back to Top button, a floating scroll-to-top control you can switch on for any sticky header
  • Added: Fix Anchor Scroll, so in-page anchor links are no longer hidden behind the sticky header
  • Added: Header Effects screen to turn individual free effects on and off
  • Improvement: Reworked the dashboard Home screen, now the default landing tab
  • Improvement: WordPress Abilities API now covers the new Back to Top and Fix Anchor Scroll effects for AI-assisted demo creation
  • Fix: Back to Top button now stays clear of the header’s own scroll transforms
  • Fix: More dashboard strings can now be translated
  • Fix: Minor Bug Fixes & Performance Improvements

2.2.2

  • Maintenance: WordPress 7.1 compatibility update
  • Maintenance: Elementor 4.2 and Elementor Pro 4.1 compatibility update

2.2.1

  • Added: Privacy: Data sharing is off by default. When enabled, shared non-sensitive details help us improve the plugin and build a better experience for users
  • Improvement: Privacy: Nothing is shared until you turn it on, and never any personal data
  • Improvement: Translation – several dashboard strings that were previously hard-coded can now be translated
  • Improvement: Deactivation feedback now works on translated sites, and only sends your email address if you tick the contact box
  • Fix: Resolved a reported WordPress.org support issue where some dashboard strings could not be translated
  • Fix: Minor Bug Fixes & Performance Improvements

2.2.0

  • Added: WordPress Abilities API support for AI-assisted sticky-header demo creation (WordPress 6.9+)
  • Added: Pro feature discovery with Live Demo and Read Docs links in the editor
  • Added: «Join Community» admin notice
  • Improvement: Dashboard UI enhancements
  • Improvement: Dashboard input validation and permission handling improved
  • Improvement: Preset and WDesignKit popup input and permission handling improved
  • Improvement: Admin notice output rendering improved for better compatibility
  • Improvement: Plugin/theme scan now runs only on the plugin’s own dashboard screen for faster admin pages
  • Improvement: Sticky scroll performance improved with animation-frame throttling
  • Improvement: Plugin code quality, PHP 8 compatibility, and translation coverage
  • Fix: Sticky Scroll Distance now honors the vh unit and responsive overrides
  • Fix: Sticky header no longer hides behind the admin bar at smaller screen widths
  • Fix: Removed a broken image reference on the rollback screen
  • Fix: Minor Bug Fixes & Performance Improvements

2.1.9

  • Maintenance: WordPress 7.0 compatibility update

2.1.8

  • Maintenance: WordPress 6.9 compatibility update

2.1.7

  • Improvement: UI Related Minor Bug Fixes

2.1.6

  • Fixed: Minor Bug Fixes & Performance Improvements

2.1.5

  • Fixed: Minor Bug Fixes & Performance Improvements

2.1.4

  • Fixed: Minor Bug Fixes & Performance Improvements

2.1.3

  • Fixed: Security Patch (Low Security)

2.1.2

  • Improvement : WDesignKit 2.0 Compatibility
  • Fixed: Minor Bug Fixes & Performance Improvements

2.1.1

  • improvement: Header Template Import Process
  • Fixed: Minor Bug Fixes & Performance Improvements

2.1.0

  • Fixed: Header Resize Issue Fixed
  • Fixed: Minor Bug Fixes & Performance Improvements

2.0

  • New: Dashboard for better UI/UX
  • New: Add Preset Option for the Ready Design
  • New: Dashboard : Plugin Rollback Option
  • Fixed: Minor Bug Fixes & Performance Improvements

1.7.8

  • Fixed: Offset issues on the frontend
  • Fixed: Minor Bug Fixes & Performance Improvements

1.7.7

  • Fixed: Minor Bug Fixes & Performance Improvements

1.7.6

  • Fixed: Offset issues on the frontend
  • Fixed: Minor Bug Fixes & Performance Improvements

1.7.5

  • Added: Offset Option for Sticky Elements to Control the Distance from the Top With Responsive Support.
  • Added: Padding Option to Customize Spacing for Sticky Elements with Responsive Support.
  • Added: Width Option to Define the Width of Sticky Elements Dynamically With Responsive Support.
  • Fixed: Minor Bug Fixes & Performance Improvements

1.7.4

  • Added: Compatibility with Elementor Containers
  • Fixed: Minor Bug Fixes & Performance Improvements

1.7.3

  • Maintenance: WordPress 6.7 compatibility update

1.7.2

  • Corregido: Fallos

1.7.1

  • Fixed: Improved method for not overriding elementor sticky settings.

1.7

  • Mantenimiento: Actualización de compatibilidad con WordPress 6.5
  • Notice: Plugin will only receive minimal support
  • Added: Pro features that would have never been released(Disable Fully Transparent Background, Background Type, Custom Menu Toggle Button, Bottom Shadow, Blur Background settings)

1.6.11

  • Mantenimiento: Actualización de compatibilidad con WordPress 6.5

1.6.10

  • Maintenance: WordPress 6.4 compatibility update

1.6.9

Corregido: Error de Javascript con las secciones
Corregido: Error en el ancho de la cabecera
Retoque: CSS optimizado

1.6.8

Fixed: Shrink logo bug
Fixed: Shrink header bug
Fixed: Transparent header bug
Fixed: All CSS color and size transitions
Added: Compatibility with new elementor «mega» menu
Added: Ability to override logo color change on elements using class «not-logo»
Tweaked: Logo color change optimized so «full color» option no longer overwrites elementor css settings

1.6.7

  • Fixed: Transparent header bug

1.6.6

  • Fixed: Shrink header bug
  • Fixed: Bottom border color and size transitions
  • Added: Compatibility with new elementor «mega» menu
  • Added: Ability to override logo color change on elements using class «not-logo»
  • Tweaked: Logo color change optimized so «full color» option no longer overwrites elementor css settings

1.6.5

  • Tweaked: Logo transition CSS for image widget
  • Tweaked: Logo color CSS for image widget
  • Maintenance: WordPress 6.2 compatibility update

1.6.4

  • Fixed: Js bug
  • Fixed: Logo color not changing on scroll
  • Fixed: CSS for smooth transitions
  • Konwn Bugs: Shrink logo/header

1.6.3

  • Reverted to 1.5.5 only with container compatibility

1.6.2

  • Fixed: Section height bug

1.6.1

  • Fixed: Js bug
  • Fixed: Container shrink bug

1.6

  • Fixed: Shrinking Logo bug
  • Fixed: Container support using Elementor free
  • Fixed: Logo color change set to none doesn’t remove CSS filter settings
  • Added: Disable/enable completely transparent header
  • Tweak: Changed logo color settings to be more clear
  • Maintenence: Optimized CSS for v2.0
  • Maintenence: Optimized JavaScript for v2.0
  • Maintenence: Optimized Elementor controls for v2.0

1.5.5

  • Fixed: Shrinking Logo bug
  • Fixed: Header section top position
  • Maintenence: Optimized CSS code

1.5.4

  • Fixed: Shrinking Logo bug

1.5.3

  • Fixed: Gap above mobile header bug

1.5.2

  • Fixed: Gap above header bug

1.5.1

  • Fixed: WordPress admin bar bug

1.5

  • Fixed: Gap above header bug

1.4.9

  • Added: Compatibility with Elementor Containers
  • Maintenance: WordPress 6.0 compatibility update

1.4.8

  • Maintenance: WordPress 5.9 compatibility update

1.4.7

  • Fixed: Misc Bugs

1.4.6

  • Fixed: Hide header bug

1.4.5

  • Fixed: WP admin bar bug

1.4.4

  • Maintenance: WordPress 5.8 compatibility update
  • Fixed: Header width bug
  • Update: Better responsive Worspress admin bar handling

1.4.3

  • Fixed: Full color logo after scroll bug

1.4.2

  • Corregido: Fallos

1.4.1

  • Fixed: Gap above header bug

1.4.0

  • Added: WordPress 5.5 compatibility
  • Added: Elementor 3 compatibility
  • Added: Hide on scroll down feature
  • Added: Blur background feature
  • Added: Before and after scrolling logo color options
  • Fixed: Opera browser hash links not activating scrolling effects
  • Fixed: Editor handle bug
  • Fixed: All labels and descriptions to help with user operation
  • Fixed: Various code optimizations
  • Fixed: Transparent on mobile bug
  • Fixed: Stretched section broke transparent header

1.3.2

  • Fixed: Transition CSS

1.3.1

  • Corregido: Fallos

1.3.0

  • Added: Shrink Logo feature

1.2.3

  • Fixed: Hook on the new Elementor Pro 2.4.7 version

1.2.2

  • Removed: Stretched section condition

1.2.1

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

1.2.0

  • 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
  • Corregido: Fallos

1.1.2

  • Corregido: Fallos

1.1.1

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

1.1.0

  • Añadido: Característica de cabecera fija
  • Added: Bottom border feature
  • Fixed: Bugs with tablet and mobile responsive modes
  • Fixed: Padding issues when using the «shrink» effect

1.0.0

  • Versión estable inicial