Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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. Is there a way to only apply the css if the user is logged in? This seems to be overriding my css.

  2. 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. 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 ? :)

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

    • Permalink to comment#

      Ok, no problem :)

      I’ll maybe dig into it so :)

  4. 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. cris
    Permalink to comment#

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

  6. 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. This is fantastic- the admin bar at the top often drives me crazy when working on menus- much appreciated.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```