I have a situation where the Wordpress 3 Admin Bar (which is cool and I do want to have) obscures some important information on my page.

Before I start fiddling with the CSS myself (which I'm sure will break stuff): Is there an existing patch to change this so the Admin Bar starts "above" the actual page? I realize there may be CSS complications (especially with absolutely positioned elements), but it should be possible.


Upon closer inspection, I found out that Wordpress already does try to move everything that would be obscured further down. The problem is elements that have been positioned using position: fixed or position: absolute.

What I ended up doing is adding separate CSS rules for those that apply only when the admin-bar class is set on the body (which Wordpress does automatically when the bar is visible.) like e.g. so:

/* Normal mode */
ul.sidemenu { top: 4px; left: 4px; ..... etc. etc.}
ul.langmenu  { top: 4px; right: 4px; .... etc. etc. }

/* Move elements 28px down when the admin bar is visible */
body.admin-bar ul.sidemenu  { top: 32px}
body.admin-bar ul.langmenu  { top: 32px}
  • Remember to make sure you have <?php body_class(); ?> in the class attribute of the <body> tag in your template. – Jonah Mar 13 '13 at 0:57

I would just move the admin bar code to the top of the page, set it to position:relative and remove the top margin for html.

remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 );
add_action( 'wp_head', 'wp_admin_bar_render', 1000 );
add_action( 'wp_head', 'wpse_42041_admin_bar_fix', 1000 );

function wpse_42041_admin_bar_fix()
<style>html{margin-top:0 !important}#wpadminbar{position:relative !important}</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.