Sticky Header Effects for Elementor Plugin Review

Explore the Sticky Header Effects for Elementor plugin to enhance your website's navigation and design. Ideal for improving user experience!

4.6

Rating summary

Reviews

300K

Active installations

Download the Plugin

Sticky Header Effects for Elementor Plugin Review

Overview

Compatibility

Installation instructions

Customer support & learning resources

Changelog

Main benefits

Customizable header styling

Responsive and cross-browser

Transparent header option

Shrink logo on scroll

Blur background effect

About this plugin

Author: Robert Wattner

Categories: Design and Customization

Version: 1.6.11

Last updated: 14-05-2024

WordPress version: 5.3

Tested up to: 6.5.5

PHP version required: 7.0

Languages: Español, Español de Colombia [+6]

Tags:

Header Sticky header Elementor Add-ons Elementor page builder

Learning resources: View resources

Overview

Sticky Header Effects for Elementor is a specialized add-on designed to enhance the Elementor Pro page builder by offering a range of styling options for headers as users scroll down a webpage. The plugin allows users to customize the scroll distance to trigger changes in the header's height, background color, bottom border, logo size, and color, among other features. It also offers advanced options like making the header transparent, adding a background blur effect, and hiding the header during downward scrolling. This fully responsive and cross-browser compatible tool integrates seamlessly into Elementor Pro's interface, ensuring a clutter-free workspace while delivering sophisticated header effects tailored for any browsing scenario.

Customizable Scrolling Effects

Change header height, background color, and bottom border upon scrolling.
Adjust the scrolling distance for the effects to be applied.
Shrink header to maximize space and achieve a slim style.

Enhanced Logo Options

Shrink logo height after scrolling.
Change logo color before or after scrolling.

Advanced Header Customization

Create a transparent header that moves down on top of the page.
Add a modern blur effect to a semi-transparent header background.
Hide the header when scrolling down and show it when scrolling up.

Cross-Browser Compatibility and Responsiveness

Works on all browsers, tablets, and mobile devices.
Fully responsive design ensures optimal performance on any device.

Features list

Feature

Free version

Premium version

Adjustable scrolling distance

Allows customization of the scroll distance before triggering effects.

Transparent header

Enables a see-through header that blends with the background.

Responsive section height with shrink effect

Automatically adjusts section height and applies a shrink effect on scroll.

Adjustable logo height after scrolling

Changes the logo size dynamically as the user scrolls.

Change header background color on scroll

Modifies the header's background color based on scroll position.

Change bottom border thickness and color on scroll

Alters the thickness and color of the bottom border when scrolling.

Replace logo image

Allows changing the logo image on the website.

Slide-in and fade-in entrance animations

Provides animations for elements to slide in or fade in on entrance.

Hide or show header elements after scrolling

Enables toggling visibility of header elements based on scroll position.

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

Offers customization of box shadow effects with various controls.

Customize mobile menu icon with transition animation

Allows adding transition animations to the mobile menu icon.

Split menus to allow center logo

Enables splitting menus to position the logo at the center.

Pricing

Free Plan

$0 / one-time

Plan includes

Adjustable scrolling distance

Transparent header

Responsive section height with shrink effect

Adjustable logo height after scrolling

Change header background color on scroll

Change bottom border thickness and color on scroll

Buy Now

Coming Soon Plan

$0 / one-time

Plan includes

Replace logo image

Slide-in and fade-in entrance animations

Hide or show header elements after scrolling

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

Customize mobile menu icon with transition animation

Split menus to allow center logo

Buy Now

In some cases companies have different prices based on various components like a location. As a result the prices displayed here can differ from the ones you see on their websites.

See all pricing options

Rating and reviews

4.6

Rating summary

Reviews

300K

Active installations

User sentiment analysis

Users appreciate the WordPress plugin for its ability to simplify the creation of sticky headers within Elementor, saving them a significant amount of coding and time. The ease of setup and customization, efficient performance, and excellent support, particularly from the developer named Robert, are commonly highlighted. Notably, the plugin allows users to maintain a sleek and responsive design with features like transparent backgrounds and logo resizing upon scroll. However, some users experience issues with mobile functionality, including glitches in sticky headers and incompatibility with custom CSS animations. The plugin also occasionally encounters conflicts with Elementor Motion Effects and has formatting inconsistencies. Thus, while highly functional, it requires continuous updates to resolve these shortcomings.

Developer zahir

15 Aug, 2024

I highly recommend this plugin for creating a sticky header in Elementor. However, it’s challenging to add custom CSS after implementing the sticky header. It would be helpful to have the ability to add a “sticky-active” class to customize the header when it’s sticky. Additionally, having the option to add a box-shadow would be beneficial.

teaneedz

11 Jul, 2024

The desktop options seem to work, but trying to integrate on the mobile side is a headache and creates more problems. Even when the sticky option is supposedly only enabled on the desktop, it carries over to my iphone still. If a transparent background is enabled, that works on the desktop, but again on the phone, the sticky header sits like a normal header but without the hero div appearing underneath it (though it works fine in desktop mode or when adjusting the desktop browser to a narrow view). This seems only really reliable on a desktop view but forget about trying to design and then getting it all to work on the mobile side. [Update] I’m going to add a star since I’m still in the middle of troubleshooting what the exact problem is here. This topic was modified 1 week, 1 day ago by teaneedz.

rzecki

27 Jun, 2024

Guys, really big big thanks for the update! After it, the plugin works even better than elementor pro header builder, really appreciate your job, keep it up!

campus42

13 Feb, 2024

Thank you for this shortcut / timesaver. Well done and it works perfect.

josflachs

21 Nov, 2023

A nice extension that takes a lot of coding out of your hands. It’s easy to fix your header, but a lot of work to make it look good. Sticky Header Effects for Elementor does that for you. What’s even better is the support. I had several problems I couldn’t solve. Within 48 hrs I got a reply. Not only was my problem solved, but some helpful suggestions to improve on it as well. Highly recommend!

Sticky Header Effects for Elementor Plugin Review

Overview

Compatibility

Installation instructions

Customer support & learning resources

Changelog

Main benefits

About this plugin

Overview

Customizable Scrolling Effects

Enhanced Logo Options

Advanced Header Customization

Cross-Browser Compatibility and Responsiveness

Features list

Pricing

Plan includes

Plan includes

Rating and reviews

User sentiment analysis

More plugins like this

JetSticky For Elementor

All-in-One Addons for Elementor – WidgetKit

Xpro Theme Builder For Elementor – FREE

Advanced Chart for Elementor

FAQ

Why isn’t the “shrink” effect working?

Is this a standalone Plugin?

Does it work with any WordPress theme?

Will this plugin slow down my website speed?

How do I enable the transparent header feature?

Can I change the header background color after scrolling?

Is the plugin responsive and cross-browser compatible?

How can I hide the header on scroll down?