# Auto-Hide the Admin Bar on the Front End

> Slides the admin bar out of view on the front end and brings it back when you move the mouse to the top edge of the screen.

- 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/auto-hide-admin-bar/

## Code

```php
add_action( 'wp_head', function () {
    if ( ! is_admin_bar_showing() ) {
        return;
    }
    ?>
    <style id="wpide-admin-bar-autohide">
        @media (hover: hover) and (min-width: 783px) {
            html { margin-top: 0 !important; }
            #wpadminbar { transform: translateY(calc(-100% + 5px)); transition: transform .2s ease .3s; opacity: .95; }
            #wpadminbar:hover, #wpadminbar:focus-within { transform: none; transition-delay: 0s; }
        }
    </style>
    <?php
}, 100 );
```

## Notes

Touch screens and narrow windows keep the normal admin bar, because there is no hover there.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Auto-Hide the Admin Bar 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/