Create an Elementor Sticky Column or Sticky Sidebar Only Within a Section

No extra plug-ins required! We will do it with Elementor Free Plugin.

Someone asked how to create a sticky column in Elementor but only from and up to a certain point… Here is how it can be done with CSS3 only.

You can see the working example of an Elementor ‘made sticky’ column further down the page.

To begin with, create a 2 column section

Add a bunch of stuff in the left column to make the whole section very tall, then add everything you want to be sticky in an inner section in the right column. That will be the Elementor sticky column, that will stay sticky until the end of the column.

Then, give this inner section a class name.

Then, add this CSS to your place of choice

I like to keep it all in the same place to find it easily afterwards. In Page settings / Advanced / Custom CSS is a good place.

You have to copy this CSS code in your theme’s Custom CSS option.

( For example in Ocean WP Theme : Appearance — = Customize — = Custom CSS/JS)

.sticky-column{ position: sticky; position: -webkit-sticky; top: 3rem; } .sticky-parent .elementor-widget-wrap { display: block!important; }