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

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

    • Axiol
      Permalink to comment#

      Ok, no problem :)

      I’ll maybe dig into it so :)

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

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

  6. 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. Robin_Jennings
    Permalink to comment#

    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>
```