# Sticky Sidebar

> Keeps the sidebar visible while visitors scroll through long posts on desktop screens, so your widgets and calls to action stay in view.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: sidebar, sticky, css, layout
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-sticky-sidebar/

## Code

```css
@media (min-width: 1024px) {
    #secondary,
    .widget-area,
    .sidebar {
        position: sticky;
        top: 2rem;
        align-self: flex-start;
    }

    .admin-bar #secondary,
    .admin-bar .widget-area,
    .admin-bar .sidebar {
        top: calc(2rem + 32px);
    }
}
```

## Notes

Works when the sidebar is shorter than the screen. Change the selector if your theme uses a different sidebar class.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Sticky Sidebar" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/