The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Shrink the Admin Bar / Expand on Hover

Last updated on:

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');


Reference URL


  1. kunal
    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….

    • Cassandra
      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. :)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed