---
title: "How to Add Sticky Social Icons in Elementor?"
url: https://theplusaddons.com/docs/add-sticky-social-icons-in-elementor/
date: 2024-07-03
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "Sticky social icons stay on screen while the reader scrolls, so the option to share is there at the end of a long article as well as at the top...."
image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-1-4-1024x565.jpg
word_count: 687
---

# How to Add Sticky Social Icons in Elementor?

## 

- The Social Sharing widget in The Plus Addons for Elementor Pro uses Vertical layout plus Elementor’s Position setting to make sticky social icons stay on screen while the reader scrolls.
- The widget is Pro-only, and with Pro switched off it renders nothing at all; Elementor (free) must be installed and active.
- The setup places the Social Sharing widget in a single-post template or on a page, then sets Layout to Vertical, View Type to Icon, and Position to Fixed with horizontal and vertical offsets.
- Fixed positioning keeps the icons at top 180 and left 20 through three screens of article, while without Fixed the widget scrolls away with the page.

Sticky social icons stay on screen while the reader scrolls, so the option to share is there at the end of a long article as well as at the top.

It takes two things: the **Social Sharing** widget in its **Vertical** layout, and Elementor's own **Position** setting to pin it. For the rest of the widget, see the [full Social Sharing settings overview](https://theplusaddons.com/docs/add-social-share-in-elementor/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/social-sharing-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro**. With Pro switched off the widget renders nothing at all.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Social Sharing** and turn its toggle on.- **Where to put it:** a single-post template if you want it on every article; otherwise the page itself.

## Steps

- Add the **Social Sharing** widget to the page or template.- In the **Content** tab, open **Social Sharing** and set **Layout** to **Vertical**. This stacks the buttons in a column, which is the shape a sticky column needs.- Pick one of the three **Style** pictures for the Vertical layout.- Set **View Type** to **Icon**. A pinned column has little room, and icons alone keep it narrow.- Add your networks in the **Social Sharing** repeater.- Go to the **Advanced** tab, open **Layout** and set **Position** to **Fixed**. Then use the horizontal and vertical offsets to place it where you want it on the screen.

![Screenshot: Go to the Advanced tab, open Layout and set Position to Fixed. Then use the horizontal and vertical offsets to place it where yo](https://theplusaddons.com/wp-content/uploads/2024/07/social-sharing-vertical-new.gif)

## What you get on the page

Without a position set, the widget is part of the page like anything else and scrolls away with it - we watched its top edge go from 40 pixels to -1,560 after scrolling. With **Position** set to **Fixed** and offsets of 20 and 180 pixels, the same widget stayed exactly where it was put through three screens of article: top 180, left 20, at the start of the page, after 1,600 pixels of scrolling and at the bottom.

![The Vertical layout with Position set to Fixed: the four icons stay at the left of the viewport while the article scrolls past.](https://theplusaddons.com/wp-content/uploads/2026/09/socialsharing-result-sticky.webp)

![Screenshot: Without a position set, the widget is part of the page like anything else and scrolls away with it - we watched its top edge go ](https://theplusaddons.com/wp-content/uploads/2024/07/social-sharing-vertical-fixed-demo.gif)

## Settings used here

| Setting | Where it is | What it does | Default |
| ------- | ----------- | ------------ | ------- |
| **Layout** | Content > Social Sharing | Set to Vertical for a column | Horizontal |
| **Style** | Content > Social Sharing | Three picture choices for the Vertical layout | Style 1 |
| **View Type** | Content > Social Sharing | Icon keeps the column narrow | Icon Text |
| **Alignment** | Content > Social Sharing | Left, centre or right, per device | Left |
| **Position** | Advanced > Layout | Elementor's own setting; Fixed pins the widget to the viewport | none |

> ***Position** is one of Elementor's own Advanced settings, not a Social Sharing one. It works the same way on any widget, and it is what makes the icons stick - the Vertical layout only gives them the right shape.*

## How It Behaves

- **Fixed pins the widget to the screen, not to the article.** It stays in place no matter how far the page scrolls, which is exactly what we measured.- **The offsets do the placing.** Once Position is Fixed, the horizontal and vertical offsets are what move the column to the edge you want.- **Each button still shares the post it sits on**, the same as in the other layouts.

## Limitations

- A fixed column overlaps the content on narrow screens. Set the offsets per device, or hide the widget on mobile with Elementor's responsive visibility settings.- **Icons can come out blank** on a page that loads nothing else from Font Awesome - we saw dark squares in place of the logos until Font Awesome's stylesheet was present.- We tested **Style 1** of the Vertical layout. Styles 2 and 3 were not rendered.- We did not test this on a mobile viewport.

## Troubleshooting

### The icons still scroll away

**Position** is not set to **Fixed**. Without it the widget is positioned relative and moves with the page.

### The column sits on top of my text

Adjust the horizontal offset, or give the content a matching margin. The widget is out of the page flow once it is fixed, so nothing makes room for it.

### The icons are dark squares

Font Awesome is not loading on that page. Add an element that brings it in, or enqueue it in your theme.

### Nothing renders at all

The Pro plugin is not active. Social Sharing is Pro-only.

https://www.youtube.com/watch?v=PIfGW6Kxs2M&t=553s

## Related Docs

- [How to Add Social Share in Elementor?](https://theplusaddons.com/docs/add-social-share-in-elementor/)- [How to Add Social Share Toggle Button in Elementor?](https://theplusaddons.com/docs/add-social-share-toggle-button-in-elementor/)

## Frequently Asked Questions

**Q: Why do my sticky social icons still scroll away in Elementor?**
A: The widget only sticks when Elementor’s own Position setting is set to Fixed. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses the Social Sharing widget in Vertical layout for the column shape, but the pinning itself comes from Advanced > Layout. If Position stays relative, the icons move with the page like normal content instead of staying on screen.

**Q: What do I need before adding sticky social icons to a page?**
A: The key requirement is the Pro edition of The Plus Addons for Elementor, plus Elementor free installed and active. The Social Sharing widget also has to be enabled under The Plus Addons > Widgets. For placement, a single-post template works if you want the icons on every article, while a normal page works for one-off placement.

**Q: Should I use Vertical layout or another layout for sticky social icons?**
A: Vertical is the right choice because it stacks the buttons into a narrow column, which is what a fixed sidebar-style share block needs. The page also says to use View Type set to Icon so the column stays compact. That matters because fixed elements have limited horizontal space, especially once they sit beside article text.

**Q: Why are my social icons showing as dark squares instead of logos?**
A: That usually means Font Awesome is not loading on that page. The tutorial says the logos can turn into dark squares until Font Awesome’s stylesheet is present. In practice, that means you need something on the page or in the theme that brings Font Awesome in, otherwise the share buttons render without their icon fonts.

**Q: How do I stop a fixed social share column from covering my text?**
A: A fixed column sits outside normal page flow, so it does not make room for itself. The clean fix is to adjust the horizontal offset or add matching margin to the content area. The page also notes that narrow screens are where overlap becomes most obvious, so device-specific offsets matter there.

**Q: Can I use sticky social icons on mobile pages?**
A: The setup can work on mobile, but the page warns that a fixed column overlaps content on narrow screens and that this tutorial was not tested on a mobile viewport. The practical move is to set offsets per device or hide the widget on mobile with Elementor’s responsive visibility settings if space gets tight.