A common issue with Elementor is being unable to keep sticky elements in their column. The typical default behavior is for the sticky element to remain sticky for the entire page scroll – this behavior is not (usually) wanted because the element will end up in the footer of the website. Usually, you want these sticky element to remain in the column. This is a good solution if one column has content that is much longer then the other column. an example of this would be a blog post (you have your content, and you have a sidebar. In some cases the content is 400% longer then the sidebar element).
Here’s the problem with the default sticky method Elementor offers.
The Default Way To Make Things Sticky
Go into the advanced settings of the Elementor settings. Go to motion effects, and turn on “sticky”.
The issue with this is that typically, the sticky element will remain sticky of the entire page when scrolling, going over content. Usually, you only want it to be sticky in the column of it’s respective section.
The Better Way To Make Things Sticky
Instead of using the default fix, do this instead:
Paste this code into the Custom CSS section of the element you want to be sticky.
selector { position: sticky; position: -webkit-sticky; top: 50px; } This code makes your Elementor element sticky in its column. When you scroll past the bottom of the column, the content remains stuck in the column.
Here’s what each section of the code means:
selectorSelector refers to the wrapper element. It only works in the Elementor custom CSS. If you want to add this code somewhere else, give your element (in this case, the inner section) a custom CSS class and apply this css to that class.
position: sticky;
position: -webkit-sticky;Both these lines make the element sticky in its respective column. The element will not leave the column in which it is nested in.
top: 50px;This offsets the sticky effect. We use it to add “padding” between the element, when sticky and the top of the page. Make it sticky from the bottom by changing ‘ top:50px; ‘ to ‘ bottom: 50px; ‘. You can change PX to REM or any height measurement.
We recommend using an inner section to house all of the content you want to be sticky.
If you want to get a bit more advanced, you can toggle the CSS stickiness on and off for different screen sizes.
On For All Sizes
body[data-elementor-device-mode=desktop]
selector, body[data-elementor-device-mode=tablet] selector,
body[data-elementor-device-mode=mobile] selector {position: sticky; position: -webkit-sticky; top: 50px;}This is just to show you all three screen size selectors. If you’re going to have it on for all devices, simply use “selector” or a custom class.
On For Only The Desktop and Tablet
body[data-elementor-device-mode=desktop] selector, body[data-elementor-device-mode=tablet]
selector {position: sticky; position: -webkit-sticky; top: 50px;}Notice, we’re just applying this to the desktop and tablet by specifying it in the selectors. By omitting mobile, the style will simply not be applied on that screen size.
