I have been living with a gripe ever since I upgraded my blog to the then latest version of WordPress (3.1). Before then, I was using WordPress Admin Bar plugin without any problems and I loved it. It was really useful even in admin panel as you don’t have to expand sections in the left panel and go to the item you want. Just hover over the entry and directly click!

WordPress 3.1 came with its own admin bar and the developer of the admin bar plugin decided to stop working on it. The new admin bar was functional, and built-in to WordPress core itself but it lacked (and still lacks) some of the things that makes WordPress Admin Bar plugin great. Of course, I am talking about how the entire left menu is reproduced in the top admin bar with drop-downs. It makes things a lot easier to find without having to open each panel on the left menu. Then there are options to selectively show or hide specific items from the menu which could have been useful to some.

So, after upgrading WordPress, I quickly turned off its built-in admin bar from my profile. There are ways to turn it off completely for all users but since I am the only user on my blog, I didn’t really need those.

Things didn’t work out as simply as I hoped. Even though WordPress’ admin bar was now hidden, there still was a white band above the page. The plugin’s admin bar came not only below the white space but over the contents of the page like you can see in this screenshot.

I was hoping that a plugin update would fix this but when I saw the plugin page again, I found that the author has decided to deprecate this plugin as the functionality is now in the core. So, this was ruled out.

Then, I tried many of the methods that disable the admin bar completely including overriding filters and removing the action which displays the admin bar. None of those methods solve the problem you see above with the white gap and the admin bar over the content.

CSS Fix

Finally deciding that this is something to do with the theme changes in WordPress 3.2, I started hunting in CSS and came up with this fix:

/* Fix for white-gap shown above the admin bar */
.wp-admin #wpabar {
     top: -28px !important;
}

A straight-forward method is to directly modify the CSS file of the plugin itself. You don’t have to worry about plugin updates as it is now deprecated. You will find the correct CSS file in this directory:

<plugin-directory>/wordpress-admin-bar/themes/grey/grey.css

(change grey with the colour of theme specified in plugin settings)

Just add the above CSS block in the file and test. This will only apply to the admin panel and not affect the styles in your theme.

functions.php fix

If finding the CSS file is difficult for you, just edit your theme’s functions.php file and add this code block.

function hw_fix_admin_bar_white_gap()
{
     echo "";
}
add_action('admin_head', 'hw_fix_admin_bar_white_gap');

The CSS style is a bit redundant as this will only affect your admin pages, but it will work.

I hope this solved your problem. Here is the final screenshot after the fix: