How to Hide the Navbar in a Blogger Blog

When you use a standard template in Blogger you get a Navigation bar or more commonly called, NavBar, that shows up at the top of the screen. The Navbar has things on it like search, Login/Logout, Dashboard, etc. and appears at the very top of each page.


I suggest that you remove this bar as it makes your site look more professional. Actually, you aren't removing it at all because I don't think that is possible. You are just hiding it. If you don't see it then you are using a template that has that navbar already hidden so you can ignore these instructions.

You will have to remember, though, that once you remove that bar you will have to go to Blogger.com manually to log into your Dashboard.

Note: Always backup your template before you make any changes to the HTML to ensure you can restore it if you make unwanted mistakes. For instructions on how to backup your template go to this post entitled, "How to Backup your Blogger Template."

Step-by-Step Instructions for Removing the Blogger Navigation Bar:

1. Click the Layout tab.

2. Click the Edit HTML link.

3. Search (Ctrl + F brings up Find) for body {

4. Click just above that line of code and paste this code and press Enter once.

#navbar {
height: 0px;
visibility: hidden;
display: none
}

5. Click Save Template at the bottom of the screen.

6. Click the Preview button and you will see that the Navbar is gone.

Now your Blogger blog will look clean and professional because you have hidden the Blogger navigation bar.

NEW HERE? Subscribe to Mommy Bloggers Guide for Free by Email or RSS. You can also follow Wendy on Twitter and contact her by Email if you have questions, comments, ideas, or you would like to write a guest post.