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.

2 Comments


Great solution, thanks! I found that class name, but I hadn\’t added body_class() to my theme. Also, typo: you forgot the question mark in the opening PHP tag.

Reply

Thanks! Works perfectly with the WordPress Twenty Fifteen theme.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.