Three simple ways to hide or remove Blogger Navbar
In continuation of the blogging customization post that we started two weeks back, our blogging tip for today is about hiding the blogger navbar. The Blogger Navbar is a 40 pixel high that appears by default at the top of every Blogger-powered blog(blogspot). It includes search blog, flag blog, next blog, dashboard and sign in/out features that you can readily access, however, many bloggers are hiding or removing this blogger navbar in their blogsite for some reasons.
Amit of Digital Inspiration had given reasons why bloggers should get rid of this navbar feature, and these are the following:
- There are two buttons on the navbar that point to the Blogger Homepage. Too much of self-promotion.
- The NextBlog button takes visitors to another recently-updated randomly selected blog on blogspot. But what if clicking the NextBlog button takes my innocent readers to a blog with adult offensive content.
- The Search Blog Form is not integrated with my Adsense for search account. I want visitors to use my custom Google site search form that is monitized by Google Adsense.
- The existing Blogger Navbar colors do not gel with my custom blogger theme.
- The BlogThis! pop-up link is already availble when I enable Blogger Backlinks.
Now, Is it LEGAL to remove or hide the said blogger navbar? Ankit has an answer, and Google have confirmed this during their blogger road-show that hiding/removing this bar is so far legal.
So, if that is the case, we can now proceed to our “Three Simple Ways to Hide/Remove Blogger Navbar”.
First Method The simplest way of them all, just copy and paste this CSS code on top of blogger template code between the header tag (<head>…</head>) , save your setting and you navbar will not appear on your site.
<style type="text/css">#navbar-iframe {visibility:hidden;display:none}</style>
Second Method If you don’t want to completely remove the navbar, you can try this method. Insert below code between the header tag (<head>…</head>)
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Third Method With this method you have the option to hide or unhide the navigation bar by using a global javascript parameter. This is flexible because it will allow you to keep the navbar and get rid of it by just a click. This is the method that I use in this blog see how it works by clicking the “show/hide navigation” on the right side of this page.
Derya’s WebResource.axd: How to hide the Blogger nav bar? has well-explained instruction on this method. Please go to this link for the complete procedure.
UPDATE:
To remove the space where the blogger navbar is supposed to be located just insert code below right after the fon-style of the body definition:
margin-top:0px;
position: relative;
top: -50px;
so that your code now will look like:
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
margin-top:0px;
position: relative;
top: -50px;
}
These are the three simple ways to hide the navbar as promised. In our next post we will take a look how to change or add graphic header and where can you find free header graphics that you could instantly use in you blog. If you are not yet subscriber , you may consider SUBSCRIBING OUR FEED now so you can receive Blogging Customization tips and updates. Stay Tuned…
Liked this article? Keep up to date by SUBSCRIBING OUR FEED
Have something in your mind? share with us & leave your comment
Don’t hesitate to drop an e-mail if you know any article that can be featured here.
For future reference right click here to bookmark this page
********************************************************************
Like this post & want more? Join our growing list of readers and allow us to deliver our blog updates directly in your inbox.
Comments
you are very much welcome paris..
and thanks for the blog hop…
your blog layout now is looking good..so if you re-design it I’m sure it will look better.
have a nice day.
[Reply]
Hey Lestat,
I have done this for quite sometime, what I want is to raise the frame up some more to get that “extra” space. I just could not figure out how to do it, would appreciate it if you know how.
[Reply]
hi pedestrian.. to remove the space. Please add this code after the “font-size” body definition
margin-top:0px;
position: relative;
top: -50px;
so it would like like this one:
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
margin-top:0px;
position: relative;
top: -50px;
}
thanks and have a nice day.
[Reply]
You are awesome Lestat thanks…… I did as told with a little adjustment of margin-top:20px instead of 0px. I am now so happy with the layout of my blog with just enough margin on top.
[Reply]
hi ped.. regarding your post-content layout… please add the code below in your main-wrapper definition, change the padding value to control the distance:
padding:20px 0px 0 10px;
text-align: justify;
Now your code will be:
#main-wrapper {
width: 440px;
float: left;
padding:20px 0px 0 10px;
text-align: justify;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
have a nice day… 
[Reply]
Thanks for the tip. But I still don’t know if I want to remove it though. Probably when I redesign my blog ΓΌ
[Reply]