To create a column sticky on a page scroll in Elementor is very easy to achieve with simple CSS. The Elementor has a sticky option by going into the advanced settings of the Elementor and going to motion effects, and turn on “sticky”, but we face an issue this way because the column gets sticky for the whole page and overlaps on all the page contents. Usually, we want to make it sticky in the column of its respective section.
So, for this purpose, we don’t use the sticky option in advanced tab of Elementor but create a column sticky in Elementor using simple CSS and ideal. Please see the video for an overall procedure or you can follow the steps elaborated below.
1) Create two columns sections on Elementor
– The columns which you want to make NOT STICKY give it the class as “Elementor-section-wrapper”.
– The column which you want to make STICKY, give it the class as “sticky-main”
2) Put the inner section in a column that has the class as “sticky-main”
– Give the whole inner-section the class as “sticky-column”
Put all classes WITHOUT QUOTATIONS. Now we have concluded giving the classes to all of our sections, its time to add CSS to each class to achieve the effect
3) Put this CSS in page Custom CSS or in the customizer CSS/JS section to create a column sticky in Elementor using simple CSS
.sticky-column {
position: sticky;
position: -webkit-sticky;
top: 8rem;
}
.sticky-main
.elementor-widget-wrap {
display: block!important;
}That’s it, you’ll get the sticky columns on page scroll which is only sticky in its column proportions. Visit our articles to read more on Elementor.
