How to Add a Sticky Sidebar in Elementor For Free Using Custom Code

A sticky sidebar can be used in multiple ways as widgets, menus, or information visible to users as they scroll through your webpage. We can do it with elementor free version. Although Elementor Pro by default offers widgets with built-in sticky options, it is possible to achieve this effect using a few lines of custom code. Here the guide will walk you through the process.

Topics Covered

Why Use a Sticky Sidebar?

A sticky sidebar can be used to put content on a page which is important to show the visitor and give them easy access. It can be put in a section of a page or a complete page or a container. Here are some use cases:

Displaying navigation menus
Highlighting offers or CTAs
Showcasing social media links or Newsletter subscription forms

What are the Possible Layouts

No matter you are using old Elementor with section, columns and inner section or the new Elementor flexbox container within a container. One thing is for sure you need to have a main container within which 2 containers left and right. The left container is where normal content is flowing on scroll and right container which can be the sticky container. How to do it practically is dependent on the Elementor version.

If you are using a section and column in Elementor:

Make sure you have a section with 2 column layout, the left and right. The left is where you keep on adding widgets which wont be sticky and flow with the scroll. The right column is the one which is going to be sticky. Inside the main parent column You would need to add an inner section which is the child element. Inside the inner section would be the widgets which you want to make sticky.

If you are using Flexbox containers.

In case of flexbox containers, with new elementor version. You need to add a container with a 2 sub container layout. Left container will be the one where normal content is which is not sticky and scrolls down. The right container is going to be the parent container where we will put the child container. The child container will have the widgets you want and this is the container which is going to be sticky.

Where to add the code?

Since we are using free version of elementor. We have 2 places to put the code.

1. Using themes Customizer to add the code. ( slide images to right)

2. Using a plugin to add the code.( slide images to right)

What are the Steps to Create a Sticky Sidebar in Elementor

1. Identify the Sidebar Section

Before implementing the sticky sidebar, ensure your Elementor layout includes the sidebar section you want to make sticky. This could be a column or widget that you’ve placed inside your design. If you are using flexbox you can use the container as well. But make sure you use the main container, which is the parent container and the child container which you can call the sticky container. The sticky container is actually going to act as the sticky sidebar. You can put mutiple widgets inside that. Here is a sample:

2. Assign a Unique CSS ID or class to the parent and child container.

Open the Elementor editor.
Select the section, container, column, or widget you want to make sticky.
Go to the Advanced tab.

Under CSS class, enter a css class name such as sticky-sidebar.
Below is a guidance ( slide images to right):

3. Add Custom CSS

To make the sidebar sticky, you’ll need to add custom CSS. This can be done within Elementor Pro’s Custom CSS field or by using your WordPress theme’s additional CSS options or plugins as discussed above.

Here’s the CSS code:

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

( slide images to right)

Some very Important Points to Consider: For the sticky sidebar to work as expected:

The parent container of the sticky element must have enough height to accommodate scrolling otherwise scrolling wont be visible.
Avoid using overflow: Make sure not to have hidden elements as hidden on parent containers, as this can interfere with the sticky positioning.

Sometimes Sticky Sidebar Overlaps Content: If this is the case for you one thing to do is you can Adjust the top value in the CSS to create sufficient spacing.
If Sticky Sidebar Doesn’t Stick: Check if the parent container’s overflow property is set to visible and that the container has adequate height.
If Sticky Sidebar Causes Layout Shifts: You can use box-shadow or padding to create visual separation and prevent jarring effects.

At the End!

You can follow these steps, you can create a professional and functional sticky sidebar without relying solely on Elementor Pro features. If you have any doubts, please feel free to connect with me, can also book a 1-1 session with me here.

Want a 1-1 with me? Check my Calendar Availability.

Need some personal guidance to build a website, want hosting discounts or having trouble with developer, or need to build a landing page, add marketing automation, or discuss business strategy, have a 1-1 with me.