I've always found the WordPress admin bar a bit annoying. It can definitely be handy for editing pages while browsing (clicking the edit button on the admin bar is easier than trying to find it in the admin area). Whilst it has its uses however, I tend to turn it off by going to Users / Profile / then un-ticking the 'Show Toolbar' check box.
I've seen tricks for moving the Toolbar to the bottom of the page, which is better because the toolbar is less obtrusive... but it still annoys me because it gets in the way of experiencing the site. The other problem of moving the toolbar around is that you have to keep track of how WordPress develops it; for example recently WordPress added another pane for the user (screenshot below).
One of the techniques I was using to push the toolbar down the bottom broke because of this new addition (well, it didn't break, but you couldn't see the new user bar because it was pushed below the bottom of the screen, being unaccounted for in the CSS).
In this tutorial we'll leave the toolbar where it is, so if WordPress adds or removes anything in future we won't have any problems. But we'll subtly hide it by default, fading it in when users hover at the top of the page. Better still we'll use CSS transitions to further control how it fades in.
The best thing is that we're only modifying 6 properties...
body.admin-bar {
margin-block-start: -28px;
}
#wpadminbar {
opacity:0;
transition: opacity 0.3s 3s;
}
#wpadminbar:hover {
opacity:1;
transition: opacity 0.3s 0s;
}