Remove Blogger NavBar with CSS

   I've researched online for hours looking for a way to remove the navbar from my blogger blog. I've found several sites that give insight on how to do this, but some of then don't work and others delete the navbar completely from the template. I'm not sure if I want to completely remove the navbar from my template. Actually, I kind of like having the functionality of the navbar, I just don't like the way it disrupts the flow of the blog.
   So I fixed it with CSS and the new blogger template designer. First, go to your template designer from the layout tab in the blogger in draft settings. Next click on the advanced link on the left side of the screen. Then scroll to the bottom of the page elements list and click on "Add CSS".
   The template designer now opens of a little section for you to add custom CSS, add this:



#navbar{display: none;}
#navbar2{
display: block;
top: 0;
left: 0;
height: 1px;
width: 100%;
background-color: #999999}

   The only changing that you will need to do for the CSS is to edit the "#999999" with whatever background color you are currently using for your blog.
   One more step and you're done. Apply your changes to your blog. Go back to blogger in draft to the layout tab. Click on "Edit HTML". You should now be able to edit your template html. Scroll down most of the html until you find the tag (this is the begining of your actual html, the rest is CSS and other stuff). Below the tag add this:

<div id="navbar2"></div>

   Save your changes and you're done. This process will "hide" your blogger navbar without deleting it forever. I'm still working on a way to show the navbar by hovering over it, but it's not a big deal for me right now. If you don't mind deleting your navbar forever there is an easier process, you can find it HERE. I just didn't feel right completely removing it from my blog. I like to use it sometimes to find new blogs that are interesting.