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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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