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:
Now all you need to do is to copy and paste this small bit of CSS
and paste it, say, at the bottom of the above script just before the last } like this:
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:



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:
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;
}
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;
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;
}
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!!!!
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!!!!
0 comments:
Post a Comment