How to Hide / Remove Blogger Navbar
February 11th, 2006How can you hide or remove the Blogger Navbar, a navigation and search bar on top of all blogspot blogs. Though they provide several useful features and different colours, sometimes it may not blend with your template.
Many bloggers have asked me how to remove this Blogger navbar. Remember, Blogger Navbar can be disabled for users publishing via FTP as per Blogger Terms of service. For free Blogger users, not publishing via FTP, you cannot disable the Navbar. So it is best to confirm with Blogger support that you can indeed hide the Navbar before proceeding to do so. You do not want your blog banned by them for such a small issue. I take no responsibility for the same.
Now if you are publishing by FTP, some tips are available on other websites to which I point you.
Turn off the Blogger Navbar – the best and official way – Go to Template, and now a new option “OFF” appears in the drop down list of “Change the Blogger NavBar”. Just select it and republish your blog.
The Blogger Help version to hide it in custom templates published via FTP is
Add
style="margin-top:40px;"to the topmost element of your Template. (i.e._table>would become_table style = "margin-top:40px;">)
Blogger Templates advises to paste this code between style tags:
<style type="text/css">
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
</style>So try all these tips, something should work for you.
Update: some people say this is a simple way to do it
#navbar-iframe {
display: none !important;
}
Subscribe RSS feed
Yu, and you can move the blogsearch input box to your side-bar by pasting the following code in the template.
<!– BlogSearch Google –>
<a href=”http://search.blogger.com/”><img src=”http://www.google.com/logos/Logo_25wht.gif” border=”0″ alt=”Google”></img></a><br/>
<form action=”http://search.blogger.com/” target=”_blank” />
<input type=”hidden” name=”ie” value=”UTF-8″ /></input>
<input type=”hidden” name=”ui” value=”blg” /></input>
<input type=”hidden” name=”bl_url” value=”YOU BLOG URL” /></input>
<input type=”text” maxLength=”255″ size=”15″ id=”b-query” name=”as_q” /></input><br />
<input type=submit value=”Search”></input></form>
<!– BlogSearch Google –>
Regards,
CetaMac
Remove NavBar and Keep Blog Searching
Alternatively, just select Off in the Change the Blogger NavBar drop down – located on the template section of your blogger settings pages. Its a lot less faff! :)
I don’t have an option to turn off the navbar in templates, probably because I don’t upload via FTP.
I have tried some of the above tips and they aren’t working for me, I’m not sure what I’m doing wrong. When I try to adjust the margins, I get pieces of my template code between the navbar and my title jpg. The blog also looks worse in IE than Firefox.
This sounds very helpful.
Can I find some more details about it in Blogger Terms of Use?
all do not work in new blogger
Just add the below at template header. I work for me in new Blogger as well (both Firefox 2 and IE 7)
Thanks, CK
I tried everything but nothing works!
Please help me!
Thanks a lot!
this code works for me!
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
I checked the blogspot page and found you only need to disable the navbar div in css style.
e.g. this code could hide the navbar too.
#navbar{
height: 0px;
visibility: hidden;
display: none;
}
here is the video..
step by step..
video tutorial..
very easy to understand with this video..
http://www.metacafe.com/watch/739548/remove_blogger_navbar/
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
THIS WORKS!!! Thanks!!!!!!
I dont get it I peaste it in the beging this:
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
As you said in my layout but then this happen :
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The processing instruction target matching “[xX][mM][lL]” is not allowed.
plz help me :( i need help!!! Im new at this ^^ email plz
#navbar-iframe {
worked for me. i tried
#b-navbar {
but it didn’t work.
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
Thanks for commentes………
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
This code only worked for mine thanks every body including this site admin……..
mindtools4u.co.cc
Thanks a lot!
this code works for me!
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}………..
Thanks for sharing the code. i gonna try it to my blog..(”,)
Before the Body {
just add
#navbar-iframe {display: none !important;}
is removing the navbar against the terms of blogger? not sure about that, though. to be safe, does anyone know how to make the navbar’s background transparent? at least if we can’t remove it, we can still make it more appealing with our layouts.
This will move it to the bottom:
#navbar-iframe {
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}
great tip!
works for me – I’ve incorporated my blog into my company website using an iframe to drop it in below the main top section & nav for the site, thereby maintaining the overall look & feel of the site – the nav bar would ruin the effect, so it’s great that this tip works!
<a href=”this tip does the trick nicely – I’ve incorporated my blog into my business website by iframe whilst keeping the top part of the page consistent with the rest of the website – removing the nav bar is necessary to maintain the integrated look & feel so this is an invaluable tip!
check the results at check the results here
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
This one is ok!
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
it hid my navbar alright… but instead, now i see the
words #navbar-iframe { height: 0px; visibility: hidden; display: none;
instead :(
That text has to go in the CSS and remember to close the brackets.
Thanks a lot, the last tip works great.
#navbar-iframe {
display: none !important;
}
Great information…to remove banner from the blog…but be careful that removing banner agains TOS of blogger…as some people say.
Thanks for sharing with us..your dear friend ramesh.
You guys who leave a code, on the comments, you’re so nice. Thanks.
And the post is amazing, best ever and you care to updated it yet.