Convenient hiding of the admin toolbar (admin-bar) in WordPress
I don't like how the admin toolbar is positioned at the top in the frontend. It often doesn't harmonize with the design, but I can live with that. However, when it starts to interfere with scrolling or additional floating panels, something definitely needs to be done.
In my opinion, the most versatile solution is to make this panel collapsible. This way, it won't interfere when it's not needed.
I searched for plugins on this matter, but found some monsters. So, I had to write my own code. I like what I've come up with; in some cases, it's very convenient: not only does the panel not interfere, it can also accommodate more elements. The essence is that the panel appears when hovering over the icon in the upper left corner and it appears in a vertical view, rather than a horizontal one. It's a kind of collapsing of the admin bar.
Here's how it looks on the Twenty Twenty-One theme:
The code that makes these transformations:
<?php /** * Сollapse ADMIN-BAR (Toolbar) into left-top corner. * * @version 1.0 */ final class Kama_Collapse_Toolbar { public static function init(){ add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] ); } public static function hooks(){ // remove html margin bumps remove_action( 'wp_head', '_admin_bar_bump_cb' ); add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] ); } public static function collapse_styles(){ // do nothing for admin-panel. // Remove this if you want to collapse admin-bar in admin-panel too. if( is_admin() ){ return; } ob_start(); ?> <style id="kama_collapse_admin_bar"> #wpadminbar{ background:none; float:left; width:auto; height:auto; bottom:0; min-width:0 !important; } #wpadminbar > *{ float:left !important; clear:both !important; } #wpadminbar .ab-top-menu li{ float:none !important; } #wpadminbar .ab-top-secondary{ float: none !important; } #wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper{ top:0; left:100%; white-space:nowrap; } #wpadminbar .quicklinks>ul>li>a{ padding-right:17px; } #wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper{ left:100%; right:auto; } html{ margin-top:0!important; } #wpadminbar{ overflow:hidden; width:33px; height:30px; } #wpadminbar:hover{ overflow:visible; width:auto; height:auto; background:rgba(102,102,102,.7); } /* the color of the main icon */ #wp-admin-bar-<?= is_multisite() ? 'my-sites' : 'site-name' ?> .ab-item:before{ color:#797c7d; } /* hide wp-logo */ #wp-admin-bar-wp-logo{ display:none; } /* #wp-admin-bar-search{ display:none; } */ /* edit for twentysixteen */ body.admin-bar:before{ display:none; } /* for almin panel --- */ @media screen and ( min-width: 782px ) { html.wp-toolbar{ padding-top:0 !important; } #wpadminbar:hover{ background:rgba(102,102,102,1); } #adminmenu{ margin-top:48px !important; } } /* Gutenberg */ #wpwrap .edit-post-header{ top:0; } #wpwrap .edit-post-sidebar{ top:56px; } </style> <?php $styles = ob_get_clean(); echo preg_replace( '/[\n\t]/', '', $styles ) ."\n"; } }
Now you need to copy this code into a file, include that file in functions.php, and start the class like this:
Kama_Collapse_Toolbar::init();
Another simple implementation option:
<?php /** * Vesrion: 1.0 */ add_action( 'init', [ Collapse_Admin_Bar::class, 'init' ] ); final class Collapse_Admin_Bar { public static function init(): void { add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] ); } public static function hooks(): void { // remove html margin bumps remove_action( 'wp_head', '_admin_bar_bump_cb' ); add_action( 'wp_enqueue_scripts', [ __CLASS__, 'collapse_styles' ] ); } public static function collapse_styles(): void { $styles = <<<CSS #wpadminbar { transition: clip-path .3s ease 1s, background-color .2s ease 1s; clip-path: polygon(0 0, 32px 0, 32px 100%, 0 100%); } #wpadminbar:not( :hover ) { background-color: rgba(29, 35, 39, 0); } #wpadminbar:not( :hover ) .ab-item::before { color: #1d2327; transition-delay: 1s; } #wpadminbar .ab-item { position: relative; } #wpadminbar #wp-admin-bar-site-name > .ab-item::after { content: ''; position: absolute; top: 7px; left: 7px; z-index: -1; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; opacity: .8; transition: opacity .2s ease 1s; } #wpadminbar:hover #wp-admin-bar-site-name > .ab-item::after { opacity: 0; transition-delay: 0s; } #wpadminbar:not( :hover ) > * { pointer-events: none; } #wpadminbar:hover { transition-delay: 0s; clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh); } @media screen and ( max-width: 782px ) { #wpadminbar { clip-path: polygon(0 0, 50px 0, 50px 100%, 0 100%); } } CSS; wp_register_style( 'collapse-admin-bar', false ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion wp_add_inline_style( 'collapse-admin-bar', $styles ); wp_enqueue_style( 'collapse-admin-bar' ); } }
You need to insert this code into functions.php, or create a plugin from it if you frequently change templates.
To make the code work, the wp_footer() function must be called in the theme's footer.php.
—