How to Make an Element Sticky in WordPress

How to Make an Element Sticky in Website Page Using ElementsKit?

The easiest method of making an element sticky in your web page is using a drag-and-drop website builder. For this, we opt for Elementor and ElementsKit to apply the sticky functionality on a WordPress website.

Let’s see a real workaround for making a specific element sticky on a website. 

Forudsætning: Since we’re following a code-free way, we need to take the support of Elementor builder. (Free version is enough)

Step 1: Install & Activate ElementsKit Plugin

First, you need to have the ElementsKit Elementor addon installed on your site. 

• Fra din WordPress dashboard, follow Plugins > Add Plugin, and search for “ElementsKit”.
• Once it appears, install and activate.

Now, the sticky feature is available in ElementsKit as a module. It applies to any Elementor native or third-party widget, column, section, etc. This advantage gives you the freedom to make anything sticky on your website, without any coding.

So, activate this module first:

• Navigate to your WordPress Dashboard.
• Gå til ElementsKit > Moduler.
• Find Sticky Content Module, toggle the switch to PÅ, and click Gem ændringer.

Step 2: Select the Element to Make Sticky

Now, go to an existing page or create a new one and start editing in the Elementor editor. In this tutorial, we’re applying the sticky effect to a widget element. 

So, enter the widget settings and make the following changes:

• Gå til Avanceret fane.
• Udvid ElementsKit Sticky menu.
• Sticky Type: Choose from Top, Bund, Kolonne, eller Vis på Scroll Up.

• Top: Best for navigation headers.
• Bottom: Best for “Buy Now” bars or cookie notices.
• Kolonne: Best for keeping a sidebar visible while the main content scrolls.
• Show on Scroll Up: Best for making any section sticky when the user scrolls up.

Step 3: Fine-Tune Sticky Behavior

To ensure a professional look, adjust these specific settings:

• Sticky indtil: If you want the element to stop sticking at a certain point (e.g., before reaching the footer), enter the CSS ID like “footer-section” of that target section here.
• Sticky Offset: Enter a pixel value (e.g., 50px) to leave space between the element and the edge of the browser.
• Sticky Background Color: Choose a color that triggers only when the element starts sticking (prevents transparency issues on scroll).
• Add “Ekit-sticky-effects” Class Offset: Use this slider to determine when the sticky effects will take action after scrolling.

Step 4: Device Visibility Control

Here’s a crucial thing: not every sticky element works on mobile. So, ElementsKit allows setting any element sticky based on device types. You just need to toggle your preferred device types to show or hide the sticky functionality. 

Step 5: Save & Preview Your Design

Once configured, use Elementor’s Responsive Mode to verify the sticky effect on Desktop, Tablet, and Mobile. 

If the background appears transparent while sticking, ensure you have set a Sticky Background Color in the module settings to maintain readability against page content.

Now, you can also play the video to watch the real workaround on applying the sticky function to an website element ⬇️

So, now you know how to make an element sticky on your web page. ElementsKit allows WordPress users to apply sticky function with versatile features.

Ofte stillede spørgsmål