Shrink the Admin Bar / Expand on Hover

A mini plugin:

 * Plugin Name: Mini Admin Bar
 * Plugin URI:
 * Description: Makes the admin bar a small button on the left and expands on hover.
 * Version: 1.0
 * Author: NetYou
 * Author URI:
 * License: MIT
 * Copyright: NetYou
add_action('get_header', 'my_filter_head');
function my_filter_head() { remove_action('wp_head', '_admin_bar_bump_cb'); }
function my_admin_css() {
        if ( is_user_logged_in() ) {
        <style type="text/css">
            #wpadminbar {
                width: 47px;
                min-width: auto;
                overflow: hidden;
                -webkit-transition: .4s width;
                -webkit-transition-delay: 1s;
                -moz-transition: .4s width;
                -moz-transition-delay: 1s;
                -o-transition: .4s width;
                -o-transition-delay: 1s;
                -ms-transition: .4s width;
                -ms-transition-delay: 1s;
                transition: .4s width;
                transition-delay: 1s;
            #wpadminbar:hover {
                width: 100%;
                overflow: visible;
                -webkit-transition-delay: 0;
                -moz-transition-delay: 0;
                -o-transition-delay: 0;
                -ms-transition-delay: 0;
                transition-delay: 0;
        <?php }
add_action('wp_head', 'my_admin_css');

Deploy a static site in one minute
Build and deploy a CMS-enabled site with Gatsby in just a few clicks. It's free.


  1. User Avatar
    Permalink to comment#

    Hey plz can you just provide a link of the demo of your shrink/expand bar in your tutorial…??
    If possible..
    Thnx a lot lot lot in advance….

    • User Avatar
      Permalink to comment#

      Hello! You probably aren’t looking for an example anymore, but if you look at my site at “” I have incorporated the code at the bottom left corner of my screen.

      I love the new look of it. :)

  2. User Avatar

    Still working, i’m using the css only from this code in custom css style with some minor modifications.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.