Simple adjustable way to hide Navbar

An email from a blogger regarding his problem with hiding the navbar caused me to revisit the hiding the navbar issue plus recheck the Blogger TOS (Terms of Service) plus discovered a very simple way to hide the navbar which I tested at A-Z Products and adapted from Disable/hide navbar.

In order to hide the Blogger navbar, all you have to do is to sign into Blogger dashboard, click LAYOUT then EDIT HTML to open the template editor. Look for the body section in the stylesheet which in the standard Blogger Minima template is as follows:

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Now all you need to do is to copy and paste this small bit of CSS

margin-top:0px;
position: relative;
top: -40px;

and paste it, say, at the bottom of the above script just before the last } like this:

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
margin-top:0px;
position: relative;
top: -40;
}

Depending on your template, you can play with the variable -40 until the extreme top of your blog header sits right at the top of the browser window or at any position according to your desire. To illustrate, see the screen shots below showing the original, the appearance with the variable as -50, then -40:

Original appearance with standard Blogger Minima template with Blogger Navbar plus space visible

Blogger Navbar plus part of Header hidden

Update: A commentator commented that the comments of J and Carol helped him, I think, with the new Blogger Template Designer, so I figured I will add their comments into the post proper:

For those using the new Template Designer, go to Design - Template Designer - Advanced - Add CSS.
Paste this code:

div.navbar {
opacity:0.0;
display:none;
}
body
{
margin-top:0px;
position: relative;
top: -50px;
}

Curse Blogger for making me spend two days on this!!!!

7/23/2010
Carol Schultz said...
j-
I tried yours and the only modification I needed to make was the last line from top:-50px; to top:-40x;
Maybe it's different depending on the template? Thanks for your help

Related posts:
Another way of hiding the navbar (February 2007)
How to hide Navbar for New Blogger (May 2007)
How to hide New Blogger Navbar (October 2008)