X

How to Move the WordPress Admin Bar to the Bottom

Snippets by IsItWP

Frustrated with the admin bar shown at the top? Want to move your WordPress admin bar to the bottom? Then, simply copy this snippet to your functions.php file.

Instructions:

All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:

    function 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>';
    }
    add_action( 'wp_head', 'move_admin_bar' );

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: Best WordPress Page Builders (Compared).

Comments   Leave a Reply

  1. For newer versions of WordPress:

    function move_admin_bar() {
    echo ‘

    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 .ab-sub-wrapper { bottom: 28px;}
    #wpadminbar .quicklinks .menupop ul { bottom: 0;}
    ‘;
    }

    add_action( ‘wp_head’, ‘move_admin_bar’ );

  2. Alright but this isn’t enough. The dropdown menu like “New -> Post” aren’t clickable because they still drop Down instead of UP.

  3. I liked the admin bar at the bottom, but it’s no longer working properly. Maybe from WP version upgrades or something. But now the bar is at the bottom but the flyout menus go down instead of up – so now I can’t see anything except the first option. I just took it off for now, but I wanted to let you know. Thanks.

    1.  Hi Cliff, ill take a look at it and update the snippet.

  4. I really like my Admin Bar at the bottom.
    Currently, I only have it for Admin – I don’t have it on the public site.
    However, the body margin:-28px affects my entire website, even when there’s no Admin bar present – even when not logged in as Admin.
    There should be some conditional like “if Admin Bar is present, CODE”
    Thanks.

    1. Hi Cliff, if you look at the header of the site even when the admin bar is not visible you will see css. See this snippet

      http://wpsnipp.com/index.php/functions-php/disable-the-new-admin-bar/

      If you do this on a user level or ” if ( !current_user_can(‘author’)){ ” type of thing this should fix things for you.

      1. I did a quick fix like that. Didn’t know if you had anything special up your sleeve. Thanks.

      2. I did a quick fix like that. Didn’t know if you had anything special up your sleeve. Thanks.

        1. Cool glad to hear you got things working.

Add a Comment Cancel reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!