Skip to content

WordPress 3.1 Admin Bar Affects Absolute Positioning CSS

This content will be shown before all post

With the new release of WordPress 3.1, they have unveiled a new “Admin Bar” that displays on the public side of your WordPress instance if individuals are logged in.  Pretty slick and handy!  However, if you are using any absolute positioned items that are positioning off of the top <body> tag, such as absolutely positioned items using “top”, when this admin bar displays, it will not shift those items.

What you will have to do is add in new CSS declarations that specify when the admin bar is displayed.  If you are using the WordPress generated CSS classes on your body tag (such as: <body <?php body_class() ?>> for your body tag in your theme’s header.php file), the Admin Bar will add the class “admin-bar” to the body tag.  The admin bar is 28px in height.  Therefore, you can add new declarations to your CSS file to shift your absolutely positioned items 28 more pixels by doing something similar:

.admin-bar .positioneditem { top: (previous top value + 28)px }
This content will be shown after all post