Skip To Content
Development

WordPress Admin Bar to the bottom of the page

Let’s say you don’t want to completely hide the admin bar from the user but want to ensure it’s not getting in their way, or yours while developing the website. This small snippet will show you how to override the default styles and force the WordPress admin bar to the bottom of the page.

When working with a site that has a fixed or absolutely positioned header, the WordPress admin bar can cause more grief than use and get in the way.

The admin bar can be super handy to quickly edit a post/page you’re currently viewing but not at the cost of covering and overlapping your site’s navigation for example.

Here is a helpful lightweight snippet you can add into your theme’s functions.php file which will force your WordPress admin bar to the bottom of the page and viewport.

WordPress admin bar to the bottom of the page

Put in your functions.php file in your theme directory

///////////////////////////
// MOVE ADMIN BAR BOTTOM //
///////////////////////////
function admin_bar_bottom() {
    echo 
    '<style type="text/css" media="screen">
    html { margin-top: 0px !important; }
    * html body { margin-top: 0px !important; }
    @media screen and ( max-width: 782px ) {
    html { margin-top: 0px !important; }
    * html body { margin-top: 0px !important; }
    }
    #wpadminbar {
        top:auto !important;
        bottom:0;
    }
    </style>';
}

// check if admin bar is enabled for the current user
if ( is_admin_bar_showing() )
{
    // call styling into the <head>
    add_action( 'wp_head', 'admin_bar_bottom', 9999 );
}

 

Comments

Your email address will not be published. Required fields are marked *

Request a Quote

If you’re ready to change the trajectory of your business and
excited to partner with the right team to get the job done.