How do I hide the Blogger navigation bar?

To hide the Blogger navigation bar, you can add the following into your template's style sheet:
#navbar-iframe { display: none; visibility: hidden; height: 0px; }
Or, if you would rather not edit your template and want to have the ability to hide/show the navigation bar, you can copy and paste the code below into an HTML/Javascript widget:
<!-- bxC --> <!-- bxC check box --> <form name="bxCF" style="display:inline;"> <input name="bxCC" checked="checked" style="vertical-align:middle;" onclick="bxCH(this.checked);" type="checkbox"/> <span style="vertical-align:middle;"> <i>Hide the Blogger navigation bar</i> </span> </form> <!-- /bxC check box --> <script type="text/javascript"> var bxC={};bxC.v=bxC.h=bxC.d=false; function bxCH(c) { var e=document.getElementById('navbar-iframe'); var x=document.bxCF.bxCC; if (x) {x.checked=c;} if (e) { if (!bxC.h) { bxC.h=e.getAttribute('height'); bxC.d=e.getAttribute('display'); bxC.v=e.getAttribute('visibility'); } e.style.display = c?'none':bxC.d; e.style.visibility = c?'hidden':bxC.v; e.style.height = c?'0px':bxC.h;} } bxCH(true); // true turns off the navbar </script> <!-- /bxC -->
Note, if you do not want the "Hide the Blogger navigation bar" check box, delete everything between the "<!-- bxC check box -->" and "<!-- /bxC check box -->" lines.

---

bxC has been tested, as of June 23, 2010, using Windows XP and the most recent stable versions of: Safari, IE, Firefox, Opera and Chrome.