BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro extension

Sticky for Elementor Pro

Pin any widget or container while the page scrolls

Overview

What Sticky does

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.

Features

What it can do

  • Stick to the top or the bottom of the screen.

  • Distance from the edge up to 300 px, with a separate value per screen size.

  • Choose the devices: desktop, tablet and phone.

  • Layer (z-index) setting so the pinned element stays above other content.

  • A different background color, box shadow and padding while the element is pinned.

  • Blur of what is behind the pinned element, up to 30 px.

  • The height of the WordPress admin bar is added at the top automatically for logged in users.

Use cases

When to use it

Sticky header

Make the header container itself sticky so it follows the whole page, and give it a background color and shadow once pinned.

Sidebar that follows

Pin a table of contents or a sign up box in a column while the visitor reads the long content next to it.

Bottom action bar

Stick a button row to the bottom of the screen on phones only.

Shrinking bar

Set a smaller Padding under While Pinned so a tall bar gets slimmer after the visitor scrolls.

Setup

How to set it up

A few steps from adding the extension to a finished result.

  1. Select the widget or container, open the Advanced tab and open the section Bright: Sticky.

  2. Switch on Sticky and set Stick To to Top of the screen or Bottom of the screen.

  3. Set Distance From the Edge if the element should stop below another sticky header.

  4. Pick the screen sizes in Sticky On and raise Layer (z-index) if other content covers the element.

  5. Under While Pinned, set Background Color, the box shadow, Padding and Blur What Is Behind for the pinned look.

  6. Preview the page and scroll. Check that no parent of the element has Overflow set to Hidden.

FAQ

Questions and answers

Why does my element not stick?

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.

Can the element look different once it is pinned?

Yes. Under While Pinned you can set a background color, a box shadow, padding and a blur of what is behind.

Can I switch sticky off on phones?

Yes. Remove Phone from Sticky On and the element scrolls normally on phones.

Bright Addons Pro

Get Sticky with Bright Addons Pro

Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.