Grow your CSS skills. Land your dream job.

Last updated on:

Shrink the Admin Bar / Expand on Hover

A mini plugin:

<?php
/*
 * Plugin Name: Mini Admin Bar
 * Plugin URI: http://www.netyou.co.il/
 * Description: Makes the admin bar a small button on the left and expands on hover.
 * Version: 1.0
 * Author: NetYou
 * Author URI: http://www.netyou.co.il/
 * 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;
            }
        </style>
        <?php }
}
add_action('wp_head', 'my_admin_css');

?>

Reference URL

Comments

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

    • Permalink to comment#

      Hello! You probably aren’t looking for an example anymore, but if you look at my site at “cassandramaedesigns.com” 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".