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