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

?>

Comments

  1. User Avatar
    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….

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

  2. User Avatar
    Valentin

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

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag