The Easiest Way to Build Sticky Headers in Elementor - No Coding 100% Free

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.

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.

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!

The latest version (6.7) caused my sticky header to not work any longer. (Using elementor header footer builder) I had to roll back to version 6.5 to get my particular problem to work. Other than that, works flawlessly.

Make nice sticky header, very useful when need to make background color to transparent header

Great support

I really like this plugin. It gives me the freedom to fully design my own header but with the features that normally come with a theme (sticky, transparent, scrolling effects, etc.). If you don’t want to use a heavy theme just for the header, Sticky Header Effects is the plugin you need. Can’t wait for the pro version!

Also, the support is really good. It’s even better than most of the support I got from paid plugins.

Awesome plugin, simple to use and a time saver.

I was trying to get what this plugin does purley in Elementor Pro. I watched videos etc on how it can be done with Elementor and CSS, but in the end it did not work as I was trying to.

I was referred to this plugin and a with 20 second setup and use, my sticky header with logo resize works flawlessly.

Why this is not already in Elementor Pro is odd. So thanks for making this.

Excellent plugin. Put together a lot of good CSS and made it work beautifully. Just one thing… 🙂 I’m using ACF for my background color. I don’t see any way of setting the opacity. Perhaps it’s the ACF plugin (Advanced Custom Fields, by Elliot Condon). It seems to be using a 6-digit code for the color. But It would be nice if I could adjust in Sticky Header Effects.

Such a great plugin! Thank you.
One suggestion, I wish I could change the font colour on scroll and the logo too. eg. transparent background with white text on load > after scroll solid white background with orange text.

This widget is simple and easy to use. It miss some functions that will be added later like the ability to shrink all the header and not just the logo.

The plugin author answer very quickly to your request.

I recommend it, and elementor should add it as a core widget.

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!