=== Sticky Elementor – Sticky Header, Menu Color After Sticky, Logo Swap & Back to Top Button === Contributors: bhumi239 Tags: sticky header, elementor, sticky menu, navigation, header Requires at least: 5.0 Tested up to: 6.9 Requires PHP: 7.2 Stable tag: 1.1.22 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Free Sticky Header for Elementor. Features Logo Swap, Shrink Effect, Mobile Sticky Menu, Scroll Blur, and Zero Layout Shift. No Pro Required! == Description == Are you looking for a **Free Sticky Header for Elementor**? **Sticky Elementor** is a high-performance, lightweight plugin designed to add advanced sticky effects to any Elementor container. Whether you want a **Transparent Sticky Header**, a **Sticky Mobile Menu**, or a **Shrink Logo on Scroll** effect, this plugin provides a complete toolkit with zero coding required. Built for full compatibility with Elementor's **Flexbox container system**, it offers advanced scroll effects, sticky triggers, entrance animations, and responsive visibility. ### 🌟 Why Choose Sticky Elementor? * **Zero Layout Shift (CLS Fix):** Our dynamic spacer ensures your content doesn't "jump" when the header becomes sticky, improving your Google Core Web Vitals score. * **Mobile-First Design:** Individual sticky controls for Desktop, Tablet, and Mobile. * **All-in-One Solution:** Get advanced sticky options, logo swapping, and menu styling in one lightweight package. ## πŸš€ Key Features * Works seamlessly with Elementor Flexbox containers and common widgets: Nav Menu, Button, Heading β€” with full control to change their styles even after they become sticky. * Compatible with **Essential Addons for Elementor** (e.g., Button, Simple Menu widgets) – sticky effects work perfectly with them. * Fully works with **Templately templates**, so you can directly use sticky effects inside pre-built designs. * **Back to Top button** with smooth scroll animation (fully customizable). * Any container sticky – headers, sections, logos, toolbars, or promo bars. * Control sticky position: top, middle, or bottom. * Customize appearance: top offset, padding, background, width, and border radius. * **Entrance animations** for sticky elements: fade, slide, zoom, rotate, bounce, and more. * **Transition Speed** controller to adjust animation speed. * **Z-Index control** to manage stacking of sticky elements. * **Rotation effects (X & Y)** on scroll for dynamic animations. * **Responsive controls** for desktop, tablet, and mobile. * **Shrink logos** and **change logo color** on scroll. * **Glassmorphism Effects:** Add modern Blur (Backdrop Filter) and Transparency effects for a premium look. * **Menu & Button Styling:** Change navigation text color and button backgrounds specifically for the sticky state. * **Back to Top Button:** Add a smooth-scrolling back to top button with customizable styles. * Works seamlessly with popular Elementor addons (Royal Addons, Premium Addons, ElementsKit, Ultimate Addons for Elementor, plus more) ensuring smooth compatibility. * Lightweight and optimized with minimal **JS & CSS** for top performance. Whether you're building a sticky header, floating section, or a smart scroll-based container β€” this plugin makes it fast and easy, and it works fully with free Elementor (Pro is not required). ### βœ… Compatibility with Popular Elementor Addons Sticky Elementor is fully tested and compatible with popular Elementor addons and their key widgets: - **Elementor Addons** – Fully supports Heading,Button and Icon styling after sticky. - **Essential Addons for Elementor** – Works with Button, Simple Menu widgets. - **Royal Addons for Elementor** – Compatible with Nav Menu, Mega Menu, and Button widgets. - **Premium Addons for Elementor** – Sticky effects work smoothly with Nav Menu and Button widgets. - **ElementsKit Elementor Addons** – Fully supports Nav Menu and Button styling after sticky. - **Ultimate Addons for Elementor** – Compatible with Nav Menu widgets and sticky styling. - **Flexbox Containers & Templately Templates** ### πŸ‘¨β€πŸ’» Why Choose Sticky Elementor? - 100% free and easy to use. - Lightweight and optimized for performance. - Designed with SEO-friendly practices. - Regular updates with new features. == Installation == 1. Upload the plugin folder to `/wp-content/plugins/` directory. 2. Activate the plugin through the β€˜Plugins’ screen in WordPress. 3. Edit any page using Elementor. 4. Select a container β†’ Go to **Advanced tab β†’ Sticky Settings**. 5. Enable sticky and customize your professional header! == Frequently Asked Questions == = How to create a Sticky Header in Elementor Free? = Simply install this plugin, open your Elementor editor, select your header container, and enable "Sticky" under the Advanced tab. = Can I use different sticky settings for Mobile? = Absolutely. Every major setting (Offset, Padding, Background) has responsive controls for Desktop, Tablet, and Mobile. = Does this plugin work with Elementor’s Flexbox Containers? = Yes! It's fully compatible and optimized for the Flexbox system. = Can I use this with free Elementor? = Absolutely. No Elementor Pro required. = Can I change menu text color after sticky without custom CSS? = Yes β€” Sticky Elementor includes direct controls to change your navigation menu text color after it becomes sticky. No custom CSS is needed. = Can I change button background or text color on sticky? = Absolutely. You can style your header buttons with different colors, backgrounds, and hover effects after sticky without writing code. = Can I change the header background color on scroll? = Yes β€” you can set a different background color for your header once it becomes sticky, making it stand out as users scroll. = Does it support Elementor Nav Menu widget styling after sticky? = Yes β€” Sticky Elementor allows you to customize Elementor's Nav Menu widget (text, hover, and active colors) specifically for the sticky state. = Can I make the logo shrink or change color on scroll? = Yes β€” logo shrink and color filter options are included. = Can I swap my logo on scroll? = Yes β€” Sticky Elementor now lets you smoothly swap logos on scroll for better branding (e.g., light logo β†’ dark logo). = Is it lightweight? = Yes, it is optimized with minimal JS/CSS to ensure your site stays fast and SEO-friendly. = Will this affect my site’s performance? = Not at all. It uses minimal and optimized JavaScript and CSS. = Does this plugin work with popular Elementor addons? = Yes βœ… Sticky Elementor is fully compatible with multiple popular Elementor addons. We have tested and confirmed compatibility with: - **Royal Addons** – Nav Menu, Mega Menu, Button - **Premium Addons** – Nav Menu, Button - **ElementsKit Addons** – Nav Menu, Button - **Ultimate Addons** – Nav Menu - **Essential Addons** – Button, Simple Menu It also works perfectly with Elementor’s core widgets such as **Nav Menu, Button, Heading, Icon, Image, and Container**. = Can I show support contact or a help message? = Yes β€” a support notice control lets you add custom help info, such as a direct link to the WordPress.org support forum, so users can raise a ticket and receive answers quickly. == Screenshots == 1. Sticky Header Customization: Change Logo, Menu Color, and Background on Scroll. 2. Elementor Menu Styling: Sticky Effects with ElementsKit Nav Menu Widget. 3. Mega Menu Sticky Support: Seamless Compatibility with Royal Addons Navigation. 4. Sticky Button Animations: Work with Essential Addons & Simple Menu Widgets. == Changelog == = 1.1.22 = * Compatibility: Compatibility with Elementor 4.0 = 1.1.21 = * Fix: Performance improvement and optimization. = 1.1.20 = * Fix: Performance improvement and optimization. = 1.1.18 = * Fix: Responsive Default top offset value issue fix. = 1.1.17 = * Fix: Default value issue fix. = 1.1.16 = * New: Responsive Device Visibility – Introduced a multi-select device control. You can now choose exactly where the sticky effect appears: Desktop, Tablet, or Mobile. * Fix: Content Jump (Zero CLS) – Added a Dynamic Spacer (Placeholder) system. This prevents the content below from "jumping" when the header becomes sticky, ensuring a smooth user experience and better Core Web Vitals. * Fix: Inner Container Support – Optimized the fixed-position logic to ensure the sticky effect works flawlessly even when applied to Elementor nested or inner containers. * Improvement: Enhanced Admin UI – Updated plugin controls with professional-styled descriptions and instructional icons for a more intuitive editing experience. * Performance: Optimized Scroll Logic – Refined JavaScript execution to prevent memory leaks and redundant DOM operations, ensuring high-speed page performance = 1.1.15 = * Improvement: Compatibility With Wordpress. = 1.1.14 = * Improvement: Compatibility With Wordpress. = 1.1.13 = * Improvement: Bug Fix. = 1.1.12 = * Improvement: Enhanced smoothness of sticky transitions. = 1.1.11 = * Improved: Added dynamic width and height support for the sticky logo to ensure consistent sizing with the original logo. * Fixed: Sticky logo not displaying correct dimensions when loaded dynamically. * Improved: Added inline styling support to retain original logo proportions. * Fixed: Border width and height alignment issue in sticky logo wrapper. * Enhanced: Smooth visibility handling for sticky logo transitions (opacity & visibility now properly initialized). = 1.1.10 = * New: Compatibility added with popular Elementor addons: - Royal Addons: Nav Menu, Mega Menu, Button - Premium Addons: Nav Menu, Button - ElementsKit Addons: Nav Menu, Button - Ultimate Addons: Nav Menu * Improvement: Better stability for menu color and button styling after sticky. * Fix: Minor CSS and JS improvements for smoother transitions. = 1.1.8 = * Improvement: Enhanced smoothness of sticky transitions. = 1.1.7 = * Fix: Small CSS refinements for better compatibility with Elementor widgets. * Fix: Minor style adjustments for smoother transitions. = 1.1.6 = * New: Added **Sticky Logo Swap** feature – change logo image smoothly when sticky activates. * Improved: Enhanced transition effects for logo changes. * Fix: Small CSS refinements for better compatibility with Elementor widgets. = 1.1.5 = * New: Added compatibility for sticky sections β€” now you can use sticky with Elementor sections along with headers and logos. * New: Added **Hue Rotate** sticky effect for creative scroll-based color animations. * New: Added **Sticky Shadow & Glow** effect for sticky elements to improve design flexibility. * New: Compatibility with **Essential Addons widgets** (Button, Simple Menu, etc.). * Improvement: Better stability for sticky effects across Elementor widgets. * Fix: Minor style adjustments for smoother transitions. = 1.1.4 = * New: Added Sticky Blur & Transparency (Glass Effect) option for modern design. * New: Added Sticky Shadow & Glow effect when element becomes sticky. * Improvement: Enhanced smoothness of sticky transitions. * Fix: Minor CSS adjustments for better compatibility with Elementor widgets. = 1.1.2 = * Added compatibility with Elementor widgets: Nav Menu (WordPress Menu), Button, Heading. Sticky effects and styles now work after elements become sticky. * Added 9+ new sticky animations: Rotate In, Bounce In, Slide Left, Slide Right, Fade In Up, Fade In Down, Fade In Left, Fade In Right, Zoom Out. * New Transition Speed controller for sticky animations. * New Z-Index control for better stacking of sticky elements. * Added Border Radius controller for sticky elements. * Improved UI for easier configuration and better user experience. * Minor performance enhancements and bug fixes for smoother sticky behavior. = 1.0.12 = * Fixed smooth animation issue for shrink logo * Fixed console error issue = 1.0.11 = * Added "Deactivation Feedback" * Improved script loading by using proper versioning. * Code cleanup for WordPress.org compliance. = 1.0.10 = * Added: **Back to Top Button** – show a scroll-to-top icon with animations and styles. * Improved: JS handling for sticky behaviors. * Fixed: Minor styling issues for sticky icons and buttons. = 1.0.9 = * Added: **Shrink Logo on Scroll** – smoothly reduce logo height when sticky activates. * Added: **Sticky Delay** – set delay before sticky effect activates. * Added: **Hide on Scroll Down** – auto-hide sticky sections when scrolling down. * Added: **Logo Color Filter on Sticky** – change image color dynamically with scroll. * Added: **User Support Notice** – optional support message with Instagram DM link. * Improved: Enhanced UI/UX of Elementor controls for Sticky Settings. * Improved: Transition smoothness for logo height and filter changes. * Minor bug fixes and performance optimizations. = 1.0.8 = * Minor code cleanup and structure improvements. = 1.0.7 = * Minor code cleanup and structure improvements. = 1.0.6 = * Improved: **JS code structure**, readability, and performance for better long-term maintenance. = 1.0.5 = * Fixed: Admin bar height is now properly included in the sticky offsetβ€”ensuring perfect alignment when logged in. * Improved: Sticky behavior now **fully respects responsive breakpoints** β€” individual offset, padding, background, and rotation per device (desktop, tablet, mobile). * Fixed: Removed conflicting reassignments and streamlined **unit logic** for cleaner and more reliable offset calculations. * Enhanced: **Transform handling** now gracefully resets on scroll-out for a smoother user experience. * Added: Developer-friendly `console.log()` to trace applied offsets in debug mode. * Improved: **JS code structure**, readability, and performance for better long-term maintenance. = 1.0.4 = * Added **animation support** for sticky containers (fadeIn, slide, zoom). * Fixed **jerk issue** on scroll activation by calculating correct offset. * Improved **popover toggle UX** and controls organization. * Enhanced JS performance and reduced reflows. * Added button styling controls: background, text, border, radius (optional). * Added support for **smooth transitions** and additional responsive tweaks. = 1.0.3 = * Minor code cleanup and structure improvements. = 1.0.2 = * Updated all class/function/constant prefixes to meet WordPress plugin review guidelines. * Fixed potential class loading issues. * Minor code cleanup and structure improvements. = 1.0.1 = * Added support for multiple sticky containers. * Improved JavaScript and CSS structure. * Minor bug fixes and compatibility updates. == Upgrade Notice == = 1.1.10 = Added compatibility with Royal Addons, Premium Addons, ElementsKit, and Ultimate Addons. Recommended update for smooth integration. == Credits == Developed with ❀️ by Bhumi == License == This plugin is licensed under the GPLv2 or later. See https://www.gnu.org/licenses/gpl-2.0.html for details.