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

Comments

  1. User Avatar
    digitalvaldosta
    Permalink to comment#

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

  2. User Avatar
    Ma Bandali
    Permalink to comment#

    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 ;)

  3. User Avatar
    Axiol
    Permalink to comment#

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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 =/

    • User Avatar
      Axiol
      Permalink to comment#

      Ok, no problem :)

      I’ll maybe dig into it so :)

  4. User Avatar
    Axiol
    Permalink to comment#

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

  5. User Avatar
    cris
    Permalink to comment#

    can it be only with a 40 px margin-top ? thank you

  6. User Avatar
    kristarella
    Permalink to comment#

    This worked for me in WP 3.5.1:

     body.admin-bar {
            margin-top: -28px;
            padding-bottom: 28px;
        }
        #wpadminbar {
            top: auto !important;
            bottom: 0;
        }
        #wpadminbar .quicklinks>ul>li {
            position:relative;
        }
        #wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper {
            bottom:28px;
        }
  7. User Avatar
    Robin_Jennings
    Permalink to comment#

    This is fantastic- the admin bar at the top often drives me crazy when working on menus- much appreciated.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag