Auto-Hide the Admin Bar on the Front End
Slides the admin bar out of view on the front end and brings it back when you move the mouse to the top edge of the screen.
Opens WPIDE on
Code
add_action( 'wp_head', function () {
if ( ! is_admin_bar_showing() ) {
return;
}
?>
<style id="wpide-admin-bar-autohide">
@media (hover: hover) and (min-width: 783px) {
html { margin-top: 0 !important; }
#wpadminbar { transform: translateY(calc(-100% + 5px)); transition: transform .2s ease .3s; opacity: .95; }
#wpadminbar:hover, #wpadminbar:focus-within { transform: none; transition-delay: 0s; }
}
</style>
<?php
}, 100 );Notes
Touch screens and narrow windows keep the normal admin bar, because there is no hover there.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.