You don’t:
- the admin toolbar isn’t trying to be sticky, it’s trying to be fixed, they aren’t the same thing
- in a modern block theme it already appears before the main site blocks container
- there are already simple solutions for when content slides under it
That approach has worked for years but these days we have something better – position: sticky – and that would keep it on the top and keep elements of the page from sliding underneath it.
Ignoring that the admin toolbar behaves differently on mobile, the problem of sliding underneath already has a solution:
.thing { top: 0; }
.admin-bar .thing { top: 32px; }
Other solutions exist but it’s not something that just vanishes by using position: sticky
.
But this all ignores that position: sticky
doesn’t match the intended behaviour of the admin toolbar. The admin toolbar is position: fixed
and isn’t trying to reproduce the sticky behaviour. Sticky helps when you want something to appear on page then “stick” once the user has scrolled past a certain threshold which isn’t what the admin toolbar does.