Use Responsive CSS to Remove Admin Bar in WordPress

Ferns Growing from Rocks

Imagine how bad the WordPress admin bar would look sitting on these rocks

If you want to remove the Admin Bar in WordPress using only CSS, there is a very easy way to do it. You can even make it responsive, so that it will display or be hidden depending on the size of the screen. Additionally, you won’t need to edit any of the core WordPress files, you will only need to edit the CSS of your theme.

CSS to hide the Admin Bar:

Now our Admin bar is hidden. It IS still loaded, however, but there is no way around that if you are planning on displaying it responsively. There are methods of removing the admin bar completely if that’s what you want to do.

You might notice, however, that now your website has a big ugly gap where the bar used to be. Let’s get rid of that gap. All we have to do is set our HTML element to position:absolute; and then set its top to -28px, the height of the admin bar.

CSS to remove the gap:

So now we’ve removed the admin bar completely. But what if we only want to remove it when the screen is below a certain width? For that, we just need to use a media query and drop our new CSS in there. Let’s assume we want to hide the admin bar when the screen width is below 675px. Here it is, with everything combined:

CSS to responsively hide the WordPress Admin Bar:

There you have it! Using this method, we can bypass all those other solutions that either completely hide the admin bar for one user or hide it for ALL users, which is rarely ideal. This is more of a fix for if you hate how stupid the bar looks on small screens and want to remove it only for them, using a clean solution with CSS. Let me know if this works for you in the comments!

About Brian Johnson

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

3 Comments on “Use Responsive CSS to Remove Admin Bar in WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *