Admin bar is a a section stays at the top of your page that lets you quickly access your admin dashboard. It also allows you to access features such as create new page, post… However, sometime it gets in the way. For example, it makes the website look different for logged in and non logged in users. With the current version of WordPress, hiding the admin bar is extremely easy.

How To Hide WordPress Blog’s Admin Bar Using Customized CSS

In order to hide the bar when you view the frontend of your site, simply go to Appearance->Customize:

You will see a screen somewhat similar to this one:

I said somewhat similar because some themes may have more options, some may have less. However, with modern themes, you should see there is a section called Additional CSS. In my case, it stays at the bottom of the panel. Let’s click on that. You will see a new panel appears as below:

Now, enter the code at the end of the text box:

#wpadminbar {
  display: none;
}
html {
  margin-top: 0 !important;
}

Then, click on Publish button.

If you view your page now, you should see the admin bar disappear.

How does the code snippet work?

If you know CSS, the code above is very simple to understand. The first rule applies to a div with the id #wpadminbar. That’s the admin bar you see on the front end (and also, in your dashboard). The display: none rule makes sure that the admin bar will not display.

The second rule is to remove the margin-top of html document. By default, the html element has a 32px margin-top (set by WordPress). Setting the margin to 0 makes the gap between your site and your browser’s viewport disappear.

Here is the result:

If you want to make the bar appear again, simply remove that code snippet in your Customize CSS box.

That’s how you can hide the admin bar in WordPress. I hope the post is helpful to you.

Have a great day!