Code Snippet

Home » Code Snippets » WordPress » Move WordPress Admin Bar to the Bottom

Move WordPress Admin Bar to the Bottom

Pre WordPress 3.3 only. Either add this CSS to your CSS file, add all the code to your functions.php file, or make a quick little plugin.

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body {
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

Reference URL

Subscribe to The Thread

  1. digitalvaldosta

    Is there a way to only apply the css if the user is logged in? This seems to be overriding my css.

    Reply ↓
  2. Ma Bandali

    It is better to be used this way:

    
function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body {
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
if ( is_admin_bar_showing() )
{add_action( 'admin_head', 'fb_move_admin_bar' );}
// on frontend area
if ( is_admin_bar_showing() )
{add_action( 'wp_head', 'fb_move_admin_bar' );}

    Because the if statement will fix the problem and it will add the action only when the admin bar is showing. (The answer to the question asked above)

    I hope it helps! :x ;)

    Reply ↓
  3. Axiol

    Could we maybe have a updated version of the code for WP 3.3 that would make the submenus of the bar work fine ? :)

    Reply ↓
    • Chris Coyier

      I can verify that’s a problem. Unfortunately I don’t have the time to tinker with it. I’d be scared to anyway is it seems like the admin bar is changing a lot from version to version it might be a bunch of work that could get broken again quickly. Personally I just gave up and moved mine back to the top =/

    • Axiol

      Ok, no problem :)

      I’ll maybe dig into it so :)

  4. Axiol

    I managed to make it works with 3.3, you can grab the code from here : https://github.com/Axiol/WPStickAdminBarBottom

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~