Create an Elementor Sticky Column Only Within a Section

No extra plug-ins required! Elementor Free Compatible.

Someone asked in the Facebook group 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. I called mine ' titlesticky '

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.

.titlesticky{
position: sticky;
position: -webkit-sticky;
top: 3rem;
}

Finally, adjust the CSS to fit your needs

Adjust the top: 3rem; value to the correct value to initiate the stickyness. You can also make it sticky from the bottom by changing ' top:3rem; ' to ' bottom: 3rem; '.

Mobile users, see the video for the working example! Because mobile view is only one column, a demonstration can't be made here. Or you can try landscape-viewing this page.

Create a Section Showcasing Products Features
Create a Section Showcasing Products Features
home
Create a Section Showcasing Products Features
Create a Full Screen Responsive Menu With Elementor and CSS
Create an Elementor Sticky Column Only Within a Section

Buy now!

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Strategy planning

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Create a Section Showcasing Products Features
home
Create a Full Screen Responsive Menu With Elementor and CSS
Create a Section Showcasing Products Features
Create an Elementor Sticky Column Only Within a Section
Awesome Elementor Hover Popup Technique
Create a Section Showcasing Products Features
Create a Section Showcasing Products Features
Create a Full Screen Responsive Menu With Elementor and CSS
Create an Elementor Sticky Column Only Within a Section
home
Awesome Elementor Hover Popup Technique
Create a Full Screen Responsive Menu With Elementor and CSS
Create a Section Showcasing Products Features
home
Create an Elementor Sticky Column Only Within a Section
Create a Section Showcasing Products Features
Awesome Elementor Hover Popup Technique
Create a Full Screen Responsive Menu With Elementor and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *