Sticky Section in Elementor Free?

DonPirate

Newbie
Joined
Nov 30, 2022
Messages
44
Reaction score
20
Hi all,

I'm using Elementor Free and would like to make a section or container sticky on scroll. Since the sticky option is only in the Pro version, is there a workaround using custom CSS? If anyone has a solution or code for this, I’d appreciate your help!

Thanks!
 
Try this:

First, add a CSS class to the section or container you want to make sticky.

For example, call it my-sticky-section.

Then, add the following CSS to your WordPress customizer or the CSS editor within Elementor:

.my-sticky-section {
position: -webkit-sticky;
position: sticky;
top: 0; /* Adjust this value to control the distance from the top */
z-index: 1000; /* Keeps it above other elements */
}

This code will make the section stick to the top of the viewport as you scroll down.

Adjust the top value to control the offset distance from the top.
 
Try this:

First, add a CSS class to the section or container you want to make sticky.

For example, call it my-sticky-section.

Then, add the following CSS to your WordPress customizer or the CSS editor within Elementor:

.my-sticky-section {
position: -webkit-sticky;
position: sticky;
top: 0; /* Adjust this value to control the distance from the top */
z-index: 1000; /* Keeps it above other elements */
}

This code will make the section stick to the top of the viewport as you scroll down.

Adjust the top value to control the offset distance from the top.
doest work for me. Already tried it...
 
Back
Top