Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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}
share|improve this answer
    
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
add comment

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>
<?php
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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