=== Sticky Header Effects for Elementor === Contributors: posimyththemes, devangvachheta, sagarpatel124, rwattner, dgovea Tags: Elementor, Elementor Page Builder, Add-ons, Header, Sticky Header Requires at least: 6.3 Tested up to: 6.8 Requires PHP: 7.0 Stable tag: 2.0 License: GPLv3 License URI: https://opensource.org/licenses/GPL-3.0 Create advanced Sticky Headers in Elementor Free or Pro with scroll effects, blur, shrink, hide on scroll & full responsive controls. == Description == ## Sticky Header Effects for Elementor – Build Smart, Responsive Sticky Headers Sticky headers are essential for improving navigation, branding visibility, and user experience on any modern website. With the **Sticky Header Effects for Elementor** plugin, you can now build sleek, customizable sticky headers that respond to user scroll behavior β€” all with **Elementor Free or Pro**. From transparent overlays to animated shrinking effects, dynamic background changes, and blur visuals β€” this plugin gives you 10+ scroll-based effects that help your header adapt beautifully to your page design. This plugin is perfect for developers, designers, bloggers, and agencies who want more control over header behavior without writing a single line of code. **This Plugin has been Acquired by POSIMYTH Innovations - [Read Announcement Blog](https://stickyheadereffects.com/massive-updates-2-0/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=nexterextension)** [🌐 Visit Website](https://stickyheadereffects.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)| [πŸ–ΌοΈ Sticky Header Templates Demos](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) | [πŸ“Ή Video Tutorials](https://www.youtube.com/c/POSIMYTHInnovations/?sub_confirmation=1) | [πŸ“‘ Documentations](https://stickyheadereffects.com/docs?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) | [πŸ‘₯ Join Community](https://www.facebook.com/groups/theplus4elementor/) | [🀝 Free Support](https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/) ### πŸ”₯ Comes with [50+ Ready to Import Templates for Elementor Headers with Sticky Header](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ## πŸ‘‘ 10+ Powerful Elementor Sticky Header Effects ### 1. Header Scroll Distance Effect **Set Scroll Trigger Threshold** Define how far the user scrolls before sticky effects activate. Perfect for precise control over header behavior. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Header+Scroll+Distance&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 2. Transparent Header Background Effect **Overlay with Elegance** Allow your header to overlay your hero or banner sections with full transparency. Ideal for modern homepage designs. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Transparent+Header+Background&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 3. Dynamic Background Color Change **Auto Background Switching** Change your header’s background color on scroll to match different sections or maintain contrast. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Background+Color+Change&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 4. Bottom Border Styling Effect **Subtle Section Separation** Add customizable borders below your sticky header for better definition and clean design. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Bottom+Border+Styling&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 5. Header Shrinking Effect **Reduce Header Height Dynamically** Shrink the entire header after scrolling to save space and focus attention on the page content. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Header+Shrinking&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 6. Logo Shrinking Effect **Responsive Logo Transition** Shrink the logo proportionally during scroll, maintaining visual balance and brand presence. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Logo+Shrinking&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 7. Logo Color Change Effect **Switch Logo Color for Better Contrast** Automatically switch to a contrasting logo color on scroll based on background or user behavior. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Logo+Color+Change&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 8. Blur Background Effect **Add Modern Blur Transition** Enhance the visual flow by applying a subtle blur effect to the background of your sticky header. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Blur+Background&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 9. Hide Header on Scroll Down Effect **Hide & Reappear on Scroll** Auto-hide the header when scrolling down and show it again on scroll up β€” great for content-heavy pages. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Hide+Header+on+Scroll+Down&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### 10. Above Header Section Effect **Sync Above Sections Seamlessly** Align your sticky effects with sections above the main header for unified motion and cleaner transitions. πŸ‘‰ [View Demo](https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Above+Header+Section&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects) ### πŸ” Check our other Products **[πŸ₯‡ The Plus Addons for Elementor](https://theplusaddons.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)** – Nexter Extension works seamlessly with The Plus Addons for Elementor. Get 120+ unique Elementor widgets, Elementor templates, and more. Includes Free Elementor Theme Builder. **[πŸ₯‡ Nexter Blocks](https://nexterwp.com/nexter-blocks/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)** – Nexter Theme works in sync with core Gutenberg. Add 90+ powerful, highly customizable blocks. **[πŸ₯‡ NexterWP Theme](https://nexterwp.com/nexter-theme/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)** – Best & Lightest Starter Theme for WordPress & Elementor. **[πŸ₯‡ Nexter Extension](https://nexterwp.com/nexter-extension?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)** – Power up your WordPress website with 20+ extensions for layout, performance, security & more. **[πŸ₯‡ UiChemy - Figma to Elementor Converter](https://uichemy.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)** – Convert your Figma Templates into live Elementor websites using our [Free Figma Plugin](https://www.figma.com/community/plugin/1265873702834050352/). **[πŸ₯‡ WDesignKit](https://wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects)** – 1000+ Templates, Elementor & Gutenberg Widget Builder, Cloud Storage, Widget to Block Converter & More. == Installation == ## β˜‘οΈ How to Install Sticky Header Effects for Elementor in 3 Easy Steps 1. Make sure Elementor (Free or Pro) is installed and activated. 2. Install the **Sticky Header Effects for Elementor** plugin from the WordPress plugin repository. 3. Open any page with Elementor β†’ Select a container or section β†’ Go to the **Advanced Tab** β†’ Enable Sticky Header Settings. == Frequently Asked Questions == **1. Do I need Elementor Pro to use this plugin?** No, this plugin works perfectly with Elementor Free. You’ll only need Elementor Pro if you're using Pro widgets or features. **2. Is this a standalone plugin?** No, it requires Elementor Free or Pro. It extends Elementor’s functionality with new header scroll effects. **3. Where can I find the Sticky Header Effects settings?** Inside Elementor Editor β†’ Select any container β†’ Go to **Advanced Tab** β†’ Scroll to **Sticky Header Effects** section. **4. Will this plugin work with any WordPress theme?** Yes, it works seamlessly with most Elementor-optimized themes, including Hello, Nexter, Astra, and more. **5. Will this slow down my website?** No. It’s optimized for performance and coded lightweight to ensure fast page loads. == Screenshots == 1. Introducing Sticky Header for Elementor – Overview of all key features and updates 2. Find Sticky Header settings inside Elementor’s Advanced Tab 3. Works seamlessly with Elementor Free & Pro – No limitations 4. Includes 50+ Ready-to-use Elementor Header Templates 5. Powerful Scroll Effects – Shrink, Blur, Hide, Color Swap & More 6. Fine-Tuned Styling Controls – Customize behavior for each device 7. Advanced Branding & Logo Effects – Shrink, Color Swap, Responsive 8. Smarter Scroll Behaviors – Transparent, Distance Control, Sticky Logic == Changelog == = 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 = - Fixed: Bugs = 1.7.1 = - Fixed: Improved method for not overriding elementor sticky settings. = 1.7 = - Maintenance: Wordpress 6.5 compatibility update - 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 = - Maintenance: Wordpress 6.5 compatibility update = 1.6.10 = - Maintenance: Wordpress 6.4 compatibility update = 1.6.9 = Fixed: Javascript bug with sections Fixed: Header width bug Tweaked: Optimized CSS = 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 = - Fixed: Bugs = 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 = - Fixed: Bugs = 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 - Fixed: Bugs = 1.1.2 = - Fixed: Bugs = 1.1.1 = - Fixed: Bug where section didn't move to top of page = 1.1.0 = - Added: Sticky header feature - Added: Bottom border feature - Fixed: Bugs with tablet and mobile responsive modes - Fixed: Padding issues when using the "shrink" effect = 1.0.0 = - Initial stable release == Upgrade Notice == = 1.7.3 = - Maintenance: Wordpress 6.7 compatibility update = 1.7.2 = - Fixed: Bugs = 1.7.1 = - Fixed: Improved method for not overriding elementor sticky settings. = 1.7 = - Maintenance: Wordpress 6.5 compatibility update - 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 = - Maintenance: Wordpress 6.5 compatibility update = 1.6.10 = - Maintenance: Wordpress 6.4 compatibility update = 1.6.9 = Fixed: Javascript bug with sections Fixed: Header width bug Tweaked: Optimized CSS = 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 = This is identical to v1.5.5 only with container compatibility. = 1.6.2 = The 1.6 update includes some substantial changes. **Some settings may need to be re-applied to continue to work properly.** = 1.6 = **Heads up, Please backup before updating!** The latest update includes some substantial changes. We highly recommend you backup your site before upgrading, and make sure you first update in a staging environment. **Some settings may need to be re-applied to continue to work properly.** = 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 = Fixed: Bugs = 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 = - Fixed: Bugs = 1.3.0 = - Added: Shrink Logo featured = 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 Fixed: Bugs = 1.1.2 = Bug fixes = 1.1.1 = Bug fixes = 1.1.0 = This version adds "Sticky Header" and "Bottom Border" options. The sticky feature will bring the section down and overlay it on top of the page. This eliminates the need for negative margins which causes page scrolling problems. The bottom border feature adds bottom border width and color options when user scrolls.