WordPress Admin Bar Hover Effect

Hey guys,

I noticed the WP admin bar from when you are logged in and viewing you site at the top gets sort of weird looking and annoying to the design.
So i came up with this small CSS snippet that works lovely in modern browsers, and also still works in most IE browsers, (only IE 9 tested).

The Admin Bar will be invisible until hovered over it.

Enjoy!

/* WP-Admin Bar Hover Effect Start */

/*
*WP-Admin Bar Hover Effect
*Author: IDocXD
*Company: 69 Studios, Inc
*URL: http:www.69studios.net
*/

#wpadminbar{
    margin-top: -20px;
    opacity: 0; /* Can set to 0.2-0.4 so that can easily tell if you are logged in or not */
    z-index: 9999; /* Just a back-up z-index to make sure the admin bar never gets lost behind content */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}

#wpadminbar:hover{
    opacity: 1;
    margin-top: 0;
}

/* WP-Admin Bar Hover Effect End */

Code (markup):

 

If you don't see anything before hovering, you won't know there's a toolbar unless you've installed the code yourself... I would put at least 20%, for opacity that is.

 

That is why there was a comment in the code stating:

And yes the code has to be installed yourself.

 

I turn off the worpress bar. It doesnt seem to work in my browser. There is just an empty space where it should be. So I go to 'edit my profile' and untick the option 'show toolbar' when viewing site. Problem solved.