How to set up and style the Sticky extension in Elementor.
Sticky pins a widget, container, section or column to the top or bottom of the screen while its parent container is on screen. You choose the distance from the edge and the devices, and the element can get its own background, shadow, padding and blur while it is pinned. Use it for headers, sidebars, share bars and call to action bars.
Part of: Bright Addons Pro.
These options are in the Advanced tab of the element.
| Option | What it does |
|---|---|
| Sticky | Switches the effect on for this element. |
| Stick To | Top of the screen or Bottom of the screen. |
| Distance From the Edge | The gap in pixels between the pinned element and the edge of the screen, per device. |
| Sticky On | The devices on which the element sticks: Desktop, Tablet and Phone. All three are on by default. |
| Layer (z-index) | The stacking order of the element while sticky. The default is 100. |
| While Pinned | Heading for the look that applies only while the element is pinned. |
| Background Color | Background color while pinned. |
| Padding | Padding while pinned, in px or em, per device. |
| Blur What Is Behind | Blurs the content behind the pinned element. It shows only with a see-through background color. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
Check that it has room to travel inside its parent container, that no parent uses Overflow: Hidden, and that the current device is selected in Sticky On.
Yes. Under While Pinned you can set a background color, a box shadow, padding and a blur of what is behind.
Yes. Remove Phone from Sticky On and the element scrolls normally on phones.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide