Elementor Sticky Keep Inside Column - CSS

If you're using the Elementor page builder and want to create a sticky section or header, you might have encountered some issues with it sticking to a certain part of the page or jumping out of its column. In this tutorial, we'll show you how to create a sticky section or header that stays within its column using CSS.

Step 1: Set up your Elementor section or header

Before we can jump into the CSS, we need to set up the section or header that we want to make sticky. Start by adding a new section to your page, or use an existing one. Add your content - whether it's text, images, or other widgets - inside the section. Then, in the section settings, turn on the "Sticky" option under the Advanced tab. This will make the section stick to the top of the page when the user scrolls down.

Step 2: Identify the column class

Now we need to identify the class of the column that the section is in. To do this, right-click on the column and select "Inspect" (or "Inspect Element" depending on your browser). This will open up the browser's developer tools. Look for the class name of the column. It should look something like this:

<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-01b1e40" data-id="01b1e40" data-element_type="column">

In this example, the class we want is "elementor-column".

Step 3: Add the CSS code

Now that we know the class of the column, we can add some CSS to make the sticky section stay within it. Add the following code to the Custom CSS section of your page in Elementor:

.elementor-column.sticky {
    position: fixed;
    width: calc(100% / 2);
    margin-left: auto;
    margin-right: auto;
    top: 0;
}

In this example, we're using a two-column layout, hence why we're dividing the width by two. If you have a different number of columns, adjust the width accordingly.

Conclusion

By following these steps, you should now have a sticky section or header that stays within its column when the user scrolls down. You can adjust the CSS properties - such as the width or margin - to fit your needs. Happy building!

Code snippet

.elementor-column.sticky {
    position: fixed;
    width: calc(100% / 2);
    margin-left: auto;
    margin-right: auto;
    top: 0;
}