Having Navigation Bar in blogger blogs doesn’t contributes to good looks of a blog. Moreover it can be a problem for many users as then spammers can notify unnecessarily to blogger about your blog and it may be out on hold for over a month.
So to Hide Navigation Bar is the best way out, some of you might be thinking that isn’t this against the usage policies of Blogger?
The answer is NO, because we are hiding the Navigation Bar and not removing it, so its still there, just not showing up.![]()
Anyway, now I will tell you How To Hide Navbar or Navigation Bar in Blogger Blogs.
01. Log in to your Free Blogger account by going to:
And enter the required fields and press Sign In
02. On your Dashboard choose the blog for which you want to Hide Nav Bar and then click on Layout tab:
Once there, click on Edit Html tab:
03. Now in Edit Html tab, before proceeding next, it would be a better idea to backup your template, by clicking on Download Full Template link:
Once downloaded, check the box to tick Expand Widget Templates:
04. Now just before the
tag in your template
Add following lines:
height: 0px;
}
It will look something like this:
Now click on Preview button [a new windows or tab will open]:
By Previewing, you don’t save the changes, but can ensure it be error free.
Also, make sure the Navbar is not showing in the preview.
05. Now click on Save Template button to change the changes.
You are successful to Hide Blogger Navbar
If the above code doesn’t work for your template, then you can try following code also:
visibility: hidden;
}
Or you can also use the combination of both to Remove Navbar.
And if later you want to have the navbar back, simply remove the style codes added.![]()
How To Create A Blog In 5 Easy Steps
How To Add A Contact Form To Your Blog


7 Responses to Hide Navigation Bar
yooray February 24, 2009
hey nice trick mate ….thanks
Bariski February 24, 2009
You are welcome fiend :)
Kimmy May 2, 2009
I hid mine today and it was so quick & easy! Thanks for the tip..it was greatly appreciated!
And I followed you as well.
Have a great weekend! :)
praveen May 28, 2009
Nice post.
even this code works flawlessly:
#navbar-iframe{ display:none !important; }
alternatively, hide navbar widget can be used which is simpler than editing HTML.
———————————————————-
testing animated smileys (this is the first time I’m seeing them in blogger powered blogs.)
:-0 :)) and :D
Bariski June 14, 2009
@praveen Glad you like this and yee your post is also nice, thanks for sharing.
learn-blogging-tips July 8, 2009
Thanks for your kind info….by the by i would like to ask you about your template and half hided social book marking icons…
Can u provide me how one can get.
Your friend Ramesh.
Bariski July 8, 2009
Hello Ramesh. Its my pleasure to help you. The social bookmarking thing I'm using on my blog is known as Sexy Bookmarks, you can get the tutorial from original author from here:
Add Sexy Bookmarks to Blogger
Hope this helps.