Blog Tutorial #1: How to Remove the Blogger Navigation Bar

If you host your blog through Blogger (www.blogspot.com), than you have noticed the navigation bar that goes across the top of your site. The bar has some features that make it easier for you when visiting other blogs. Many bloggers believe that it can be distracting and look unprofessional on some sites. Some even want to optimize the space at the top of their site for the header or an ad, so they choose to remove the bar. There is not an option offered through Blogger to remove the bar. In fact, the only options you have are the limited number of colors you can change it to. There is, however, a simple solution for removing the bar yourself. Even if you are not familiar with your blog's HTML code. Now that Blogger has an option to enter CSS, the process is as simple as copying and pasting a code (without having to read through hundreds of lines of text you don't understand) and hitting 'Save'. 

1. Go to your dashboard in Blogger. Then, go to the 'Template Designer' tab.

*Note: If you are not able to read the text in these images, click on the images to enlarge them.

2. When you are in 'Template Designer' mode, go to the 'Add CSS' tab.

3. When you open the CSS window, paste in the following code:

#navbar-iframe {
display: none !important;
}



So, it should look like this:

After you paste the code, hit the 'Enter" key on your keyboard and click 'Apply to Blog'. Then you are done! Super easy! When you go look at your blog, the navigation bar should be gone.

~xoxo~