Skip to content

WordPress 3.1 Admin Bar Affects Absolute Positioning CSS

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 }
Find this useful? Take just a moment and give a $1. Thanks!
Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
  • Pingback: Absolute positioning issue - DesignersTalk()

  • Not quite useful, as this can’t detect & adjust automatically. Use jQuery approach instead.

    [Reply]

    Sators reply on September 11th, 2013:

    Not the “best” practice to rely on Javascript to “fix” the design for you when straight HTML/CSS will achieve the same result without adding unnecessary Javascript load.

    [Reply]

  • Pingback: blogging()