How To Keep An Elementor Sticky Element In Its Column

Published: May 5, 2020

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.

We want the text in the left hand column to STOP when it reaches the bottom of the section. Instead, it continues to be sticky causing it to go over the footer and look unpolished.

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:

selectorposition: sticky;
position: -webkit-sticky;
top: 50px;
Selector 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. Both these lines make the element sticky in its respective column. The element will not leave the column in which it is nested in. 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 SizesOn For Only The Desktop and Tablet
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.
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.

Questions/comments? Join our Facebook group ????????

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.

isotropic black Friday deal finder

Search, sort, and filter through the best BFCM WordPress deals online.

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.


A relationship driven website creation company.


© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram