Add Snippet To Project
If you’re like many WordPress users, you may find the admin bar—located at the top of your website’s pages—distracting or inconvenient. While it serves a useful purpose in providing quick access to various administrative tools, it also takes up valuable space on your screen. Fortunately, there is a simple way to relocate the admin bar to the bottom of your screen, where it will be out of the way and still easily accessible. In this article, we’ll show you how to make this customization to your WordPress site.
function wpturbo_move_admin_bar() {
echo '
<style type="text/css">
body.admin-bar #wpadminbar {
top: auto !important;
bottom: 0;
}
body.admin-bar {
margin-bottom: 32px;
}
body.admin-bar .site-header {
margin-top: 32px;
margin-bottom: 0;
}
</style>
';
}
add_action( 'wp_head', 'wpturbo_move_admin_bar' );
The code snippet provided allows you to move the WordPress admin bar from the default top position to the bottom of the screen. This can be useful for certain sites where the admin bar gets in the way of the site's design or navigation.
The first part of the code snippet defines a new function called wpturbo_move_admin_bar(). This function is responsible for outputting the custom CSS that will position the admin bar at the bottom of the screen. The function uses the echo statement to output the CSS code as a string.
The CSS code that's being output positions the admin bar at the bottom of the screen by setting the top property to auto and the bottom property to 0. This code will work with any WordPress theme without having to modify any theme files.
Here's the relevant CSS code for positioning the admin bar at the bottom of the screen:
body.admin-bar #wpadminbar {
top: auto !important;
bottom: 0;
}The !important keyword is used to override any other CSS rules that may be trying to position the admin bar at the top of the screen.
In addition, the code also sets a margin-bottom property for the body selector, which ensures that the site content is not hidden behind the admin bar. It also includes selectors to adjust the margin of the .site-header class, which ensures that the header is not hidden by the admin bar once it is positioned at the bottom of the screen.
Lastly, the add_action() function is used to hook the wpturbo_move_admin_bar() function into the wp_head action, which ensures that the custom CSS is included in the site's head section. Once the CSS is included, the admin bar will be positioned at the bottom of the screen for authenticated users.