The Admin Bar and Absolute Positioning

The latest release of WordPress (3.1) comes with a new ‘Admin Bar’ – a small area at the top of your site that displays (for logged in users) quick links and easy access to some of the most used portions of WordPress.

If you happen to have absolutely positioned elements that take their position off of the body tag, however, these items will not shift, while everything else is shifted down 28px, the height of the admin bar.

The Fix

Luckily it’s easy enough to fix. If you’re using a modern WP theme, the body tag will contain the
<?php body_class(); ?> (If you’re using Hybrid the code will be: <php hybrid_body_class(); ?>). WordPress will use this tag to add the class: .admin-bar to the body tag – only when the Admin Bar is being shown. You can then use something like the following code in your CSS to fix it:

.admin-bar .absolutepositioneditem { top: (previous absolute position + 28)px; }

Update: If you’re using the Hybrid Core Framework (as all recent sites I’ve built do), Version 1.0.1 is not adding the class .admin-bar to the body tag. Version 1.1.1 fixes this.

Update 2:After installing the latest version of Hybrid Core, there seems to be an issue with sidebar registration – I ended up losing all sidebars. The lesson learned here is to be careful when installing code that isn’t ready for public release.