Move the WordPress Admin Bar to the Bottom

While the WordPress admin bar is undoubtedly useful, in some situations, it just gets in the way. See the below scenarios that are based on my experiences. Perhaps you also run into these problems. As an easy solution, I like to move it to the bottom of the screen. This cosmetic change is only for the front-end, though. Don’t worry, it’ll still behave the same way, except the dropdown menus will “drop up”.

Why move the admin bar?

Nowadays, many sites use some sticky or floating menu. These can manipulate where the page begins. The padding or margin of the HTML or the body element can be affected by the menu. Coincidentally, the WordPress admin bar also brings some changes to these values, sometimes causing a conflict.

Moreover, some UI elements measure their positions from the top. These will behave erroneously for logged-in users vs. the public. For example, our helpful code bubbles were affected (you can see them on this site; they appear above particular CSS values). These are the courtesy of the Previewers plugin for the Prism syntax highlighter.

Scroll-to plugins that animate scrolling to a Y position will often scroll the page in a way that seems too much, as it gets covered or shifted by the admin bar. If you try to offset that, you’ll fix it for logged-in users, but in turn, break it for the public. 😩

The WordPress admin bar on mobile devices

We can’t rule out the possibility that you’ll log-in to your site and manage it from your phone or tablet. While it’s less of a concern as this is not for the public, only for you, it’s still worth a few words. Usually, on mobile devices, the admin bar is not sticky but appears at the top of the page. When we move it to the bottom, but without setting its position to fixed, it just floats around and looks buggy. So this process will change its behavior and stick it to the bottom, and it’ll appear there persistently. Hope that’s okay!

Per-user restriction

Since we are a team and I wasn’t sure everybody wants their WordPress admin bar moved to the bottom, I decided to include a conditional to check if I’m me. How philosophical. In essence, some extra lines help avoid the anger of other team members. If you are the sole user, they can be omitted – or just fill in your username as you would anyway.

The code

To counter the infinite dance of fixing things while you are logged in – only to break them for the public, I propose moving the admin bar to the bottom. Here is the code that you can add to your WordPress site:

<?php
function lwp_4056_bottom_admin_bar()
{
    ?>
    <style>
        div#wpadminbar {
            top: auto;
            bottom: 0;
            position: fixed;
        }
        .ab-sub-wrapper {
            bottom: 32px;
        }
        html[lang] {
            margin-top: 0 !important;
            margin-bottom: 32px !important;
        }
        @media screen and (max-width: 782px){
            .ab-sub-wrapper {
                bottom: 46px;
            }
            html[lang] {
                margin-bottom: 46px !important;
            }
        }
    </style>
    <?php
}
function lwp_4056_check_username()
{
    if(is_admin()) return;
    $user = wp_get_current_user();
    if($user && isset($user->user_login) && 'johndoe' === $user->user_login) {
        // Remove extra conditions after $user from above to apply for everyone
        add_action('wp_head', 'lwp_4056_bottom_admin_bar', 100);
    }
}
add_action('init', 'lwp_4056_check_username');

Don’t forget to change johndoe to your actual user name. Other than that, that should be all. I hope you’ve found this useful.