Make the Administrator Navigation Sticky in Joomla

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. It's written for Atum, the default administrator template in Joomla 4, 5 and 6.

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

1. Install Code Snippets 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

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, and see Admin Locations for the other places a snippet can run in the backend.