Move WordPress Admin Bar to the Bottom

Not everybody likes the WordPress Admin Bar, which exists since WordPress 3.1, at the top of the browser. With just a bit CSS you can change it. The following function provides CSS directly in the footer of backend and frontend. It displays the Admin Bar at the bottom.

You can expand the code as you like, for example the implementation with the help of an external CSS stylesheet to get it into the compiler of WordPress. Also you could arrange options for the users. For my needs this little snippet helped, put in a Plugin or in the functions.php of your theme.

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

As an alternative you could also use this Plugin, thanks Coen!

Comments are closed.

7 comments

  1. Troy Chaplin

    Nice function! While I think this is quite useful for certain types of site designs, I do have one issue which I tested on 3 of my local builds.

    There is a CSS style applied to the html item that specifies a margin of 28px at the top that still exists after adding this function to my themes. I tried to remove by adding some extra styling to the function, but it causes other styling issues in the administration area.

  2. Coen Jacobs

    Nice piece of code, looks awfully familier though!

    http://wordpress.org/extend/plugins/stick-admin-bar-to-bottom/

    This plugin contains a better CSS fix btw, that works on all themes. Might not be the cleanest solutions, but it's the only way to work around the '!important' code in core CSS files...

  3. Alex

    Hey Coen, we didn't know that there is already a Plugin available. That's good for many users just to activate your Plugin.

    We don't like to use for every little function a Plugin, that's why we prefer some lines into the code and that's it. :)

    But thanks for the link, I'm sure many users will use it. We will add it to our post.

    @Troy, looks like the Plugin solves your problem. Please try it out.

  4. David Gwyer

    Or you can minimise it:

    http://wordpress.org/extend/plugins/admin-bar-minimiser/

    :)

  5. Joshua Chase

    Why not just use:

    function stick_admin_bar_to_bottom_css() {
    echo "

    html {
    padding-bottom: 28px !important;
    }

    body.admin-bar {
    margin-top: -28px;
    }

    #wpadminbar {
    top: auto !important;
    bottom: 0;
    }

    #wpadminbar .quicklinks .menupop ul {
    bottom: 28px;
    }

    ";
    }

    add_action('admin_head', 'stick_admin_bar_to_bottom_css');
    add_action('wp_head', 'stick_admin_bar_to_bottom_css');

    That seemed to work for me fine without the 28px issues..

2 pingbacks

  1. Move WordPress Admin Bar to the Bottom » The Blog of Blogs
  2. Admin Bar Tricks | Digging into WordPress