This article is about the way you can remove the so-called admin bar (the bar with "Log in" link) on the top of your website run by WordPress CMS. We are talking about the thing bar on the top of the webpage. Somebody calls her "login bar", somebody: "admin bar". If you try to research internet and find a solution, you will find that a lot of manuals offer you to install a special wordpress plugin. Please, don't do it. Wordpress already has functionality for deleting this annoying bar and only thing you have to do is to put one small line in a proper place. Let's take a look on it:

This is how admin bar looks in my case:

Removing admin bar

Very often users do use different WordPress themes for their websites and themes' developers very often put an additional functionality (menus, plugins) for customization. My website also uses theme in order to make my page good looking. Keep in mind, that you can remove this admin bar regardless what theme are you using (if any).

Strategy

1. We are checking the source code of the page
2. We are finding the html code of the code
3. We just make the bar invisible using our own css style code.

Advantages of our solution

1. We are not changing the code of the page. We are just hiding the admin-bar (making it invisible for visitors).
2. In case you do something wrong, you will not damage your wordpress installation, you can always go back and try again without harm for your website.
3. This approach and manual will work forever (even in case WordPress will change the code) in all WordPress versions. So this manual is working now and 100% will work in 10 years :)

Disadvantages of our solution

• Html-code of the bar is still in the source code, it disappears just visually, but it is still there and doesn't make your page more light-weight (but we can neglect this fact, because wordpress-based websites require already hundreds of bytes or more often several megabystes of traffic to load on a visitor's browser).

Step 1: search the bar in source-code of your page

May be you already know, how to view the source code of your webpage, but still - I will show for those, who are not familiar with hi-tech-internet-technologies. On of the ways how to do it is to show you webpage's source code and then find needed element, but we can do it faster: So, first you point with your mouse cursor on a sign "Log in", click right mouse button and choose "inspect" option in menu. Like this:

Now let's analyze what we have found:

• RED markings: this is the nested element with a link. You see "Log in" hyperlink.
• GREEN: This is the whole construction (nested elements) of the bar. You see, that the bar consists of several nested elements nested in each other. This is how beauty is being made in CSS.
• BLUE: This is the main html-element of the admin-bar (div class = "wpadminbar").

Now all we have to do is to hide this <div>. I'm saying hide, because in reality we are not removing or deleting it. Simply saying our goal is to add additional parameters to this html element, which will make him invisible on the screen. Let's go!

Step 2: nagivate to "Appearance → Customize" in main menu

You have to click here to enter appropriate settings we need to change:

Step 3: put the code for hiding the admin bar

Then you will see WordPress appearance customization menu and now we are entering "Additional CSS" menu:

And now we just copy the following code:

#wpadminbar {display:none !important;}

Into the field:

and click "Publish" to save changes.

That's all. As you see, parameter "display" in CSS style "controls" visibility of a html-object.

Next time you want to return the admin bar back, you just delete the code above.

What next?

This manual can be used to hide actually everything you don't know how to hide not only in your WordPress, but in every other CMS engine or website (in case you program your website you surely know, what to do, but in case you are working with a code of somebody else and you are afraid to change the code to crash your page, you can use this safe method almost everywhere).