How To Keep An Elementor Sticky Element In Its Column

Authored By: James LePage
Published On: May 5, 2020

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

amazon elementor E book

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 Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.