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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".