How To Move WordPress Admin Bar To The Bottom

By default, WordPress admin bar is on the top position of our website, and will stay there forever! However, you can bring admin bar to the bottom of your WordPress’ front-end and back-end with a simple snippet. This snippet will add some CSS to your back and front-end’s head.

Add following snippet to your theme’s functions.php file:

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

The above code will apply this effect to both ends of your website. Just play with last four lines of the snippet to change this.

[alert style=”red”]Warning: This code will not effect admin bar’s drop down menus. Thus, drop down menus will not work.[/alert]