---
title: "Make the Administrator Navigation Sticky in Joomla - Code Snippets"
description: "Keep the Joomla backend's top bar, toolbar and side menu in view while you scroll long lists and edit forms, using one CSS snippet."
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/sticky-admin-navigation"
date: "2026-10-23T01:21:50+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Code Snippets ](https://www.tassos.gr/docs/code-snippets) / [ How-to Guides ](https://www.tassos.gr/docs/code-snippets/howto) / [ User Experience ](https://www.tassos.gr/docs/code-snippets/howto/user-experience)

#  Make the Administrator Navigation Sticky in Joomla

##  Keep the Joomla backend's top bar, toolbar and side menu in view while you scroll long lists and edit forms, using one CSS snippet.

 ![Make the Administrator Navigation Sticky in Joomla](https://www.tassos.gr/images/2026/10/code-snippets-sticky-admin-navigation-card.png)Halfway down a list of 200 articles, the side menu and the top bar are long gone, and getting to another component means scrolling all the way back up. The toolbar with the Save button sticks, but nothing else does. You can make the administrator navigation sticky in Joomla with one CSS snippet in Code Snippets.

The snippet goes into the **Admin Header** location, which is part of [Code Snippets Pro](https://www.tassos.gr/code-snippets). It's written for Atum, the default administrator template in Joomla 4, 5 and 6.

## [The CSS snippet code](#the-css-snippet-code)

The snippet pins the top bar to the top of the window, moves the toolbar right under it, and keeps the side menu in view. A menu taller than the window scrolls on its own, so every item stays reachable.

```
/* Height of the Joomla top bar. Atum uses 66px. */
:root {
    --tcs-admin-header-height: 66px;
}

/* Keep the top bar in view. */
.header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* The toolbar already sticks to the top. Move it under the top bar. */
.subhead {
    top: var(--tcs-admin-header-height);
}

/* Keep the side menu in view, and let long menus scroll on their own. */
#sidebar-wrapper {

    position: sticky;
    top: var(--tcs-admin-header-height);
    align-self: flex-start;
    height: calc(100vh - var(--tcs-admin-header-height));
    overflow-y: auto;
}
```

Atum's top bar is 66 pixels tall. If a template style or a plugin changes that, edit `--tcs-admin-header-height` and the toolbar and menu move with it.

## [How to add this snippet](#how-to-add-this-snippet)

1. Install [Code Snippets](https://www.tassos.gr/docs/code-snippets/getting-started/how-to-install) if it isn't installed already.
2. Log into your Joomla backend.
3. Go to **Components** → **Tassos Code Snippets**.
4. Click **New**.
5. Enter a title, for example *Sticky admin navigation*.
6. Set **Code Type** to **CSS**.
7. Set **Location** to **Admin Header**.
8. Paste the code above into the editor.
9. Click **Save & Close**.

## [Check that it works](#check-that-it-works)

1. Go to **Content** → **Articles**, or any list long enough to scroll.
2. Scroll down.

The top bar, the toolbar and the side menu stay where they are while the list moves underneath. Narrow the browser window to tablet size and the same holds.

To learn more about CSS snippets, read the [CSS snippet docs](https://www.tassos.gr/docs/code-snippets/types/css), and see [Admin Locations](https://www.tassos.gr/docs/code-snippets/locations/admin) for the other places a snippet can run in the backend.

 Last updated on Oct 15th 2026 15:10