Skip To Content

WordPress Admin Bar to the bottom of the page

Kevin Doherty

Creative Director

Date

May. 1, 2014

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

 

Book with us

Let’s accomplish what you are looking for, our team of experts are here for you.

Let's work together

Warning: Working with our team may result in excessive creativity, uncontrollable 'aha' moments, and an addiction to perfect pixels. Please proceed with caution.