Thursday, May 24, 2007

How to hide the navbar for New Blogger

Refer to Simple adjustable way to hide Navbar for an easier way to hide the Navbar. Also see earlier update at the bottom of the post.

The navbar is compulsory for bloggers using blogspot.com for their blogs, and it can also be useful. It has a search box which will allow visitors to search the content of your blog. You can also change the color of the navbar to blend with the colors of your blog by going to the LAYOUT and right at the top, you will see a section for navbar. Click EDIT and chose the color for the navbar.

However, many people have expressed the desire to remove the navbar as there is "Next Blog" in the navbar which when click will lead to an unpredictable blog which may contain sexually explicit content, etc and about which people like educators who set up blogs for their students are very unhappy about.

Update 29 July 2007: Accoring to Kawaljit of Maybe it is OK to remove Blogger navbar, Google did a series of road show in some Indian cities to promote their Blogger platform. Ankit attended the event and asked for clarification on the navbar policy from the Google representatives at the roadshow. They called up their office in Bangalore office and confirmed that it's legal to hide the navbar.

If you really want to hide the navbar, this is how to go about it. Whenever you make changes to the template, it is always wise to backup the template first. If you are not familiar with that, refer to this post: Backing up and changing New Blogger template.

Sign into Dashboard, click LAYOUT for the relevant blog and then click the EDIT HTML sub-tab. This will open the template editor window. Look for this tag: </head>. Paste this script immediately above that tag:

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

so that what you see will be

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

Preview, and if satisfied, click "Save Template".

To demonstrate, I will hide the navbar from this blog DIY (Do It Yourself) which is a blogspot blog.

There are New Blogger templates by Final Sense which you get via links in New Blogger 3 column templates by Final Sense. Although there is a navbar Page Element in the Layout of the most blog templates, there are no navbar for blogs using Final Sense Color templates. So if you don't want a navbar, but have an excuse for it perhaps you may want to consider using Final Sense templates.

Update 5 July 2007: A blogger commented this method don't seem to work anymore. I tested before I published and it work, but on getting him comment, I tested again and found that what he said was true. I have tested a slightly different way of doing it at Another way of hiding the navbar and found that the alternative way worked. So if you still want to hide the navbar, refer to the new post.

Amazon products for Blogger

Related posts:

Another way of hiding the navbar (February 2007)
How to hide New Blogger Navbar (October 2008)
Simple adjustable way to hide Navbar (January 2010)

39 comments:

  1. Thanks Peter, you are a star!

    ReplyDelete
  2. thx peter this really helpful i was searching everywhere how to do that

    thx alot

    ReplyDelete
  3. Thanks for the tip, it works beautifully!

    ReplyDelete
  4. Thanks for the tip, it works beautifully! Now I just have to work on changing the header pic lol.

    ReplyDelete
  5. Hey Chen,


    Why is your NavBar not hidden? Is there a reason behind it? ~winks~

    ReplyDelete
  6. Hi SwordMouth,

    The navbar, I like it there. There is a useful searchbox for visitors to search my blog in addition to the Google sitesearch box. They give different results. Further, don't want to run into trouble with Blogger although that is very unlikely. Educators like to remove it because they use blogspot for their students and they don't want them to use it and com across blogs with explicit sexual content, etc.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  7. "Educators like to remove it because they use blogspot for their students and they don't want them to use it and com across blogs with explicit sexual content, etc."

    I am referring to Next Blog,

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  8. Hi Pete! :)

    I'm exclusively using your tips to customize my new blog

    weird things happen all time

    Just 2 questions:

    1 how to remove that text above header & keep the space? can I for example change its color to blend with background?

    2 is it against blogger TOS to remove the navbar? If so I guess I have to put it back ..

    Thanks for great work! :)

    ReplyDelete
  9. "how to remove that text above header & keep the space? can I for example change its color to blend with background?"

    Sorry, don't understand the question. Could you be referring to the navbar?

    "is it against blogger TOS to remove the navbar?"

    Yes if you use blogspot. No if you host the blog on your own server. but many educators who uses blogspot for blogs for the students wants it removed because they don't want the students to use the Next Blog and then get to sites having explicit sexual content, etc. Further, there are plenty of blogspot blogs with navbar removed and Blogger don't seem to want to do anything about it. As for me, I like to keep the navbar because it can be useful (searchbox).

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

    ReplyDelete
  10. Hi!

    It's hard to me but I'll try to explain:

    If you look at my blog you'll see a text above header "welcome to the odd world", initially in your code there was something else, I don't want it to be there but when I removed it my header stuck with the top, I want that space from the top to remain & the text not to show.

    Thanks in advance & thanks for explanation about the TOS, I understand about educators but if it's not allowed I don't think blogger will consider that, so finally maybe I'll put the navbar back ..

    ReplyDelete
  11. This actually does work. Thank you.

    ReplyDelete
  12. Hi!
    Navbar-Hiding doesn't work..what do I make wrong?

    (Can't copy my html template into this window here...error messages because of tags will appear)

    I use minima black templ. - modified a little bit...

    the head-tag appears in the last quarter of my templ.

    Can u help me?? THX !! Christine

    ReplyDelete
  13. Hi Christine,

    All hacks are tested and found to be working before they are published, but things can changed.

    I am getting more than 1 feedback about the problem you mentioned, but don't have the luxury of time to look into the problem at the moment. Will add it to my long "to do" list and hope to get to it some day. In the meantime, if you get a solution, will appreciate some feedback as that will help me and my readers.

    Peter Blog*Star
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  14. chamaco12/10/2007

    it can be done by pasting this code:
    #navbar-iframe { display: none !important;}
    right above
    /* Variable definitions
    both way works cheers.

    ReplyDelete
  15. Does the navbar automatically disappear if you buy a custom domain via a Google partner?

    ReplyDelete
  16. Hi the matty boosh,

    I have registered 2 domains with godaddy, then when I found out you can register via Blogger cum Google Apps, I registered another 1 or 2. Problem is, I am proceeding very cautiously to make sure any blogspot URL or my domain with or without the www will go to the same site. One more problem. When I registered one domain via Blogger cum Google Apps, the www. plus .com was already there in the URL, I just fill in a blank field. However, I found out the domain I got was minus that www which is not what I want. I have written to both Godaddy and Google Apps (agent for godaddy). Godaddy referred me to Google Apps, so made a damaged products to Google Appls. Have yet to receive a response and have no time/too lazy to bug them. So I still have not started with this custom domain. I have no practical experience, so cannot answer your question. But I will try to get an answer from those who have and hopefully get a response I can convey to you.

    Peter Blog*Star
    Blogger for Dummies

    ReplyDelete
  17. One more thing which I don't know if you want to consider. Irrespective of whether yours is a blogspot or own domain, you can use other templates which automatically hides the navbar, but don't know if that is what you want. Here is one:

    New Blogger templates by Final Sense

    There may be some here, but not sure:

    New Blogger templates (mostly 3 columns)

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  18. Thank you very much for your quick reply:-). I found somewhere on the blogger help pages that you are only allowed to take the navbar away if you have an ftp account.

    ReplyDelete
  19. Hi Matty,

    Can you please give me the URL to that Help page? I understand that that is no longer Blogger policy. I need the info. I for one will need a group of riot squad police to drag me into a self-hosted blog (FTP).

    Peter Blog*Star
    Environmentally friendly presents

    ReplyDelete
  20. This comment has been removed by a blog administrator.

    ReplyDelete
  21. Hi Matty,

    First, that is out of date and we have been informed it is not against Blogger TOS to hide navbar for blogspot blogs. I will try to get reconfirmation and put up a post to inform bloggers.

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  22. Matty's comment will have to be deleted because there is an inactive (unclickable) long URL which has ended up as a long unbroken line. Do refer to make clickable or active links in blog posts and comments.

    Peter Blog*Star
    Blogger for Dummies

    ReplyDelete
  23. Hi:

    To remove the nav bar that tag doesn't work anymore.

    This one does:


    style type='text/css'
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none;
    }
    style

    my two cents

    ReplyDelete
  24. Thank you

    Thank you

    Andrés Hidalgo

    ^__________^

    ReplyDelete
  25. Thank you

    Thank you

    Peter Chen

    ^__________^

    ReplyDelete
  26. hi Peter. i have a question. i removed the blogger navbar. but i concerned for it. is it forbidden? is it a mistake?

    ReplyDelete
  27. thanks for your info

    ReplyDelete
  28. This is a good article - however, I have a reversed situation LOL.

    I have a template that a friend wants to use - but that template does NOT show the navbar and she does in fact want to have the navebar.

    So - how do I do the reverse? Do I look for this code you've provided and remove it? Or is there some other code I need to find or insert?

    Thank you!

    ReplyDelete
  29. Its really working! & My blog has a wider & broader space w/o the navbar.

    Thanks You :)

    ReplyDelete
  30. Thanks a lot . You are really a great man .

    ReplyDelete
  31. one other option would be,for those who want the Navigation bar on their blog is to be able to change it to a color of their choice other than just the present 4 colors. E.g. if your page is yellow then we should have theoption of changing the navbar to yellow for instanse. I have just put my navbar back as I have found that by removing it My blog titile is too high up the page to be seen.Also is hiding the navbar against bloggers terms of service? I cannot get an answer on this. Andrea.

    ReplyDelete
  32. If my memory is not too faulty, I seem to remember a discussion where a Blogger Employee indicated they have no objections.

    ReplyDelete
  33. Too cool! Many thanks.

    ReplyDelete
  34. Thank you! Very easy!

    ReplyDelete
  35. Thanks Peter... It worked on my blog...

    Its useful to visit your blog every time

    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