Skip to content

Share buttons

Sticky and floating share bars: when they help

By Hannah Voss, Editor · Reviewed September 2026 · 3 min read

Quick answer

A sticky share bar keeps buttons in view as the reader scrolls: usually a vertical rail beside the content on desktop and a slim bar at the bottom on phones. It helps long articles; it hurts short pages, covers content on small screens if it is too tall, and can cause layout shift if it is injected late. Reserve its space and hide it where it does not fit.

On this page
  1. Two shapes, two screens
  2. When a sticky bar earns its place
  3. When it gets in the way
  4. Build it without layout shift
  5. The old add-ons, in context
  6. Questions

Two shapes, two screens

Where share bars sit: a left rail on desktop, a bottom bar on phonesdesktop, 1280 pxleft railbottom bar, thumb zone
The rail sits in the margin on wide screens; on phones the bar belongs at the bottom, in the thumb zone.

On desktop, a floating sidebar sits in the left margin beside the article column and follows the reader down the page. On phones there is no margin, so the equivalent is a bar fixed to the bottom of the screen. Top-fixed share bars on mobile compete with the browser's own address bar and the site header, and they are the pattern readers find most intrusive.

When a sticky bar earns its place

  • Long guides and tutorials where the end-of-post buttons are thousands of pixels away.
  • Pages people share while reading, such as data pieces and checklists.
  • Sites whose analytics show shares mostly come from mobile.

When it gets in the way

  • Short posts where the end-of-post row is already on screen.
  • Layouts with a narrow margin, where the rail overlaps text at some window widths.
  • Pages that already have a sticky header, cookie notice and chat widget. Three fixed elements on a phone leave little room to read.

Build it without layout shift

  1. Reserve space

    If the bar is injected by script after load, the page jumps. Use CSS so the bar is part of the first render, and add bottom padding to the body on mobile equal to the bar height.

  2. Pick a breakpoint

    Show the rail only when the margin is wide enough, for example above 1100 pixels, and switch to the bottom bar below it. Test the widths in between.

  3. Keep it short

    Four icons at most on mobile. Put copy link first.

  4. Respect the keyboard

    Fixed elements must not trap focus, and the bar's links need visible focus styles.

  5. Let readers dismiss it

    A small close control on mobile is courteous and reduces frustration on long reads.

The old add-ons, in context

Plugins of the MashShare era sold sticky bars and floating sidebars as separate add-ons, and those product pages still attract links. The ideas were sound. What changed is that page experience signals now measure layout shift, so the implementation matters as much as the placement.

Questions

Do sticky share bars increase shares?

They can on long content and mobile-heavy sites, because the buttons are always reachable. On short pages the difference is small and the bar costs screen space.

Should a mobile share bar be at the top or bottom?

The bottom. It sits where thumbs reach and does not fight the browser address bar or your header.

Can a sticky share bar cause CLS?

Yes, if it is inserted after the page renders. Render it with the page in CSS and reserve its space.

Share this guide

Hannah Voss, Editor. Checks every guide against a working WordPress install and the networks' current documentation. Last reviewed September 2026.

  1. Share buttons on mobile: layout, size and native sharingMake share buttons work on phones: tap target sizes, one-line rows, bottom bars, the native share sheet, and how to show different buttons on small screens.3 min read
  2. Share buttons and page speedWhy some share buttons slow WordPress pages and others cost almost nothing. How to measure the impact, and what to change to keep sharing fast on every page.3 min read
  3. Which share networks to show, and how manyHow to choose which social share buttons to display: match networks to your audience, keep the row short, and add copy link, email and messaging options.3 min read