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

 

Originally published on

Leave a Reply

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

Have Any Questions?

Speak with a
Digital Expert

  • Looking to increase leads?
  • Maximize profits?
  • Redesign your website?
  • Sell Online?
  • Build an App?

Let's Discuss Your Next Project

  • This field is for validation purposes and should be left unchanged.