Monday, May 01, 2006

Tip: Hiding the navbar

Update 24 May 2007: A blog visitor complained that the instruction didn't work for him. This post was written before New Blogger was introduced and perhaps it wouldn't work for New Blogger. If you are using New Blogger template, refer to How to hide navbar for New Blogger

Update 24 October 2006. Some people have very stong opinion about the hiding of the navbar as it violate Blogger TOS (Terms of Service). They feel that Blogger is asking very little of bloggers in return for providing this free service. Please read the rest of this post with that in mind. And be reminded that there are advantages of having a navbar at the top of your blog. However, many people are wary of the Next Blog link in the navbar which takes to to random Blogger blogs, some of which may contain explicit sexual content, hate messages, etc. Some educators who want to set up blogs for their students are understandbly wary of this and want to remove the navbar, and I can understand why.

The navbar is the bar at the top of every blogspot.com blog that contains from left to right, the Blogger logo, a search box, Search This Blog, Search All Blogs, Blog This!, Get Your Own Blog, Flag, Next Blog. It is by default dark blue in color, but it may have been changed to tan or some other color.

Many bloggers for some reasons or other want to hide this navbar. To hide the navbar, try adding this code in between the <style></style> tags, in the <head> section.

<!--Code to remove blogger navbar-->
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
<!--End of code to remove blogger navbar-->


However, here are some reasons why one should keep the navbar. For one, I believe the navbar is required as per Blogger's Term of Service. Another is to allow visitors to navigate around your blog by using the blog search box at the top left-hand corner. In fact, on my blog, I have 2 search boxes, one in the navbar and one Google sitesearch box. I have noticed that the search results from the 2 boxes differ. One search result may turn up a relevant topic when the other one fails to do so.

NEWER POST    OLDER POST

37 comments:

  1. ver do i insert this code for navbar

    ReplyDelete
  2. In the head section between the style /style tags. I have corrected the main post. Look there.

    ReplyDelete
  3. It is advisable to keep the "I power Blogger" button, though. I have no navbar for ages, mainly because I got it all funked up when HTML-ing around, but I think it's sensible to keep at least one Blogger advert/button.

    ReplyDelete
  4. I'd like to add that for those new to blogspot, who would rather not risk terming their account [by getting rid of the navbar] that the colors *are* somewhat customizable to integrate almost seamlessly with your site!

    Great site. Informative. ...and welcome to Blogshares! :)

    ReplyDelete
  5. Hi Samsara,

    Thanks for the feedback. BTW are you from Blogshare. (I just registered this blog with Blogshare).

    ReplyDelete
  6. In IE my nav bar bunches up into a square box in the left corner. In Mozilla it streches across the top of the page. How can I fix in IE. Thanks for the information.

    ReplyDelete
  7. I'm afraid I don't know. Does it display the same way in all browser? Why don't you try changing template and see if that helps.

    ReplyDelete
  8. I got rid of the navbar, but the prob is there is a white strip above it. how do i eliminate that? There are so many blogs out there without the navbar, is it really necessary to keep the nabar?

    ReplyDelete
  9. I tried inserting the script as recommended but the nav bar still appear. Is it blogger had ways of ignoring the script?

    ReplyDelete
  10. I have written to blogger support to ask of your are allowed to disable the nav-bar. There responds;

    [quote]
    Thanks for writing in. You can turn the Navbar on or off (as well as alter
    the color) at your leisure if you use Blogger's FTP option together with
    your own hosting provider. Users of Blogger's free hosting service
    (publishing on blogspot.com) do not have the option of turning the Navbar
    off.
    [/quote]

    I host my blog outside blogger. The code does not work. But in the menu to edit your template and you can select the color of the nav-bar I have also the option "off". And now it is gone :-)

    ReplyDelete
  11. I put the code in different places: right after style type="text/css", right before where it said /style, but it didn't work. When I put it after the style type thing, it removed my background color. Is there something I'm doing wrong?

    ReplyDelete
  12. I'd also like to say that I tried a different code in the past that let me remove the navbar, but it left the green background in it's place instead of moving everything up the proper amount. What's wrong?

    ReplyDelete
  13. Okay, now if I remove the part where it says that it's the navbar remove code, the navbar is gone, leaving that annoying green gap in its place....?

    ReplyDelete
  14. I found the code to remove the navbar and the gap. I hope it shows up right: #b-navbar { height:0px; visibility:hidden }
    body { position: relative; top: -32px; }

    ReplyDelete
  15. Ah! (Sorry for making so many comments on this thread.) That code just moved the gap from the top of the page to the bottom! And when viewed in IE, the right column with all the links and stuff is pushed to the bottom... Anybody know how to make it really work?

    ReplyDelete
  16. Actually, I think the column drop is unrelated. I'm glad IE7 is out, because the drop doesn't appear there! And until I can completely remove the navbar and the gap, I'll just leave it as is.

    ReplyDelete
  17. Anonymous11/21/2006

    Hi,

    I tried the code but it doesn't work under beta blogger. (took a while I found out)

    I got this code from a guy and signed up for blog, unfortunately you cannot signup for the old blogger blog anymore but you automatically get beta blog which sucks.

    If anyone of you know how to get rid of the blogger bar under beta blogger I'd be grateful if you could let me know.

    Thanks
    Mike

    ReplyDelete
  18. Hi Mike,

    Sorry you can't get a classic blog now, and this hack doesn't work for beta. There are people working on that and some of them may have succeeded. Anyway, having a searchbar is a requirement for those using blogspot, and is not a bad thing to have. If you really want it that badly, you can try reverting to classic template. I can send you the classic template if you want.

    ReplyDelete
  19. I found better approach
    based on the same idea.
    It allows you to show/hide the navbar by clicking a button. It works also in the new non-beta Blogger.

    ReplyDelete
  20. HI I remove the navbar successfully but then how can I add new articles?

    Thanks

    ReplyDelete
  21. Hi

    You should be able to publish new post as usual. Are you having problem with that?

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  22. without nav-bar, how should i add new articles?

    ReplyDelete
  23. Hi,

    Regarding publishing new post without the navbar, I think you must be referring to clicking on "New Post" in the navbar to make new post. You can always make new post by signing into blogger.com, click "New post" in the section for the relevant blog in the Dashboard and the post editor window will open.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  24. Another way to hide navbar

    http://blogger-tutor.blogspot.com/2007/07/hide-navbar.html

    ReplyDelete
  25. hiding the navbar with that code provided by thomas (which is great because it pops up again when mouse moves over it) it leaves a blank/ white frame which is kind of ugly, can I fill that part with the background color of the blog (which is green in my case...)?
    much appreciated!

    ReplyDelete
  26. hi,
    i have added some pictures on the sidebar.These pictures appear on the next pages of my blog too but i wish to add some other set of pictures at the sidebar of the next pages.Is it possible and how?

    ReplyDelete
  27. Stuff in sidebars will appear in all pages. I doubt it, but there may be a way to make them appear in only certain pages (this is used in templates) but I haven't tried.

    ReplyDelete
  28. it doesn't work. help me~

    ReplyDelete
  29. Just try doing a the following:

    #navbar { display:none; }

    See if that fixes all the gap issues. That iframe is contained in a div with a navbar id on it. If you hide that whole div it should eliminate empty divs.

    ReplyDelete
  30. hi,i have the opposite problem ,how to put the navbar up .
    after installing a template it don't show up,is there any code to do this other than hiding it?

    ReplyDelete
  31. Search the template to see if you can find this block of code (it should be somewhere between <head> and </head>):

    <style type='text/css'>
    #navbar-iframe {
    display: none;
    }
    </style>

    If it is there, then just remove it.

    Remember before you meddle with the template, always backup template and backup page elements (gadgets)

    ReplyDelete
  32. For what it's worth, I needed to take the nav bar out because it had my email on it and I can't remove the primary address or change it to anything else. I can have an alternate address but that's not the one showing up in the nav bar. My only other option is to wipe the blog and start with a new account, which I may have to do anyway.

    ReplyDelete
  33. You don't need to be worried about the email address you saw as only you when signed in can view it. Others will only see their own email address, not yours, and that too only when they are signed into their own Bank account.

    ReplyDelete
  34. Hai!Ihave a problem bcause my blog dont have a followers collum.How do ill get it to my blog.Another thing is I cant find a Lay out collum when i push customize.It should appear as a many boxes isn't it...but know it's different.pls help me.Otherwise Thanks 2 U...

    ReplyDelete
  35. There is a Follower gadget. Go to LAYOUT and click Add a gadget

    ReplyDelete
  36. There is a Follower gadget. Go to LAYOUT and click Add a gadget

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics