Friday, May 25, 2012

How to Remove the Blogger Navigation Bar

Image of Blogger blog's navigation bar


UPDATE 9/11/12: Blogger has just introduced a really easy way to remove the navigation bar. You can still follow the HTML instructions below, or you can go to "Layout," click "edit" on the NavBar (top right corner), and click "off" in the pop-up box:


Blogger Navbar configuration - turn it off
  

That's it. You can always turn it on again if you like. Here's my original article with the HTML code:


* * *

How do you remove the Blogger navigation bar from your blog? I recently wrote an article, "8 Ways to Make a Blogger Blog Look and Act Like a Website" that did not include this tip, because I constantly waffle about it.


On the one hand, it is a convenient way to access the Blogger dashboard and design templates and it allows people to follow the blog easily. On the other hand, it's a design element that announces, "Blogger blog," to the world, and hiding the bar presents a cleaner look. So here's what you do if you want to hide your Blogger navigation bar:

How to Hide the Blogger navigation bar. 


Go to Design --> Edit HTML (In the new interface, go to "Template," and "Edit HTML"). Before making any changes, make sure you hit the link, "Download Full Template" to save a copy of your current settings. Find "body {" and add the following code after that:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

My blog without the navigation bar:
Image of blogger blog without navigation bar
Blogger blog without navigation bar at top


How to minimize your Blogger navigation bar.


If you aren't quite ready to give up on the navigation bar, but want to make it less obvious. Go to Design --> Page Elements, and "Edit" the Navbar. In the new interface, go to Layout and "Edit" the Navbar. You'll be given choices about how your Navbar will look. "Transparent Light" or "Transparent Dark" are good choices to give your Navbar a subtle look, depending on whether your blog's background is light or dark.






If you liked this post, you may also like:

14 comments:

  1. Thank you so much for this.

    I have been trying to remove blogger nav bar since 2 hours. Eventually your post has helped me in doing it.

    ReplyDelete
  2. Informative post through which I got my blogger nav removed. Struggling for that but got it solved after finding it here. Thanks for an informative article.

    ReplyDelete
  3. Stumbled on your website and found it very helpful. Didn't want to leave without saying thanks!

    ReplyDelete
  4. Hello great experience, dude! thanks for this great Articles wow… it’s very wonderful report.

    ReplyDelete
  5. Thanks for this one. I noticed that the blogger bar does not appear for web visitors as it is only visible if you are in admin mode. I'm pretty OC about screens and hover bars.

    local seo services
    MJ

    ReplyDelete
  6. That’s it? I thought I need to visit some seo organic optimization pages to learn how to remove the navigation bar. Good thing my friend referred this link to me, it’s easy as one click.

    Louisse

    ReplyDelete
    Replies
    1. Isn't that funny? I just edited my intro to update it for the new interface.

      Delete
  7. Wow! You just helped me out so much I just removed it and didn't realize how easy it would be. Thanks! Looking forward to trying to recreate my blog.

    ReplyDelete
  8. hi,

    I'm new to this blogging, I have created a blog but whatever post I am not being able to list it under other categories that I've created.
    Please help me with how should I place my post under different heading??

    ReplyDelete
  9. I've used dynamic template and already created the heading ..

    ReplyDelete
  10. It is a very nice article including a lot of viral content. I am going to share it on social media. Get the fireworks online / crackers online in chennai.

    ReplyDelete

Join the discussion...