# Move the Admin Bar to the Bottom on the Front End

> Pins the admin bar to the bottom of the screen on the front end, so it no longer covers sticky headers and menus while you browse your site.

- Type: PHP
- Runs: Frontend only
- Category: [Admin](https://wpide.com/library/category/admin/)
- Tags: admin, admin-bar, frontend
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/admin-bar-at-bottom/

## Code

```php
add_action( 'wp_head', function () {
    if ( ! is_admin_bar_showing() ) {
        return;
    }
    ?>
    <style id="wpide-admin-bar-bottom">
        html { margin-top: 0 !important; }
        body { margin-bottom: 32px; }
        #wpadminbar { top: auto !important; bottom: 0; position: fixed; }
        #wpadminbar .menupop .ab-sub-wrapper { bottom: 32px; }
        @media screen and (max-width: 782px) {
            body { margin-bottom: 46px; }
            #wpadminbar .menupop .ab-sub-wrapper { bottom: 46px; }
        }
    </style>
    <?php
}, 100 );
```

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Move the Admin Bar to the Bottom on the Front End" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/