Saturday, January 16, 2010

Simple adjustable way to hide Navbar


An email from a blogger regarding his problem with hiding the navbar caused me to revisit the hiding the navbar issue plus recheck the Blogger TOS (Terms of Service) plus discovered a very simple way to hide the navbar which I tested at A-Z Products and adapted from Disable/hide navbar.

In order to hide the Blogger navbar, all you have to do is to sign into Blogger dashboard, click LAYOUT then EDIT HTML to open the template editor. Look for the body section in the stylesheet which in the standard Blogger Minima template is as follows:

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Now all you need to do is to copy and paste this small bit of CSS

margin-top:0px;
position: relative;
top: -40px;


and paste it, say, at the bottom of the above script just before the last } like this:

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
margin-top:0px;
position: relative;
top: -40;

}


Depending on your template, you can play with the variable -40 until the extreme top of your blog header sits right at the top of the browser window or at any position according to your desire. To illustrate, see the screen shots below showing the original, the appearance with the variable as -50, then -40:

original appearance navbar with Minima template
Original appearance with standard Blogger Minima template with Blogger Navbar plus space visible


navbar plus part of Header hidden
Blogger Navbar plus part of Header hidden


Blogger Navbar hidden and no space above blog Header

Update: A commentator commented that the comments of J and Carol helped him, I think, with the new Blogger Template Designer, so I figured I will add their comments into the post proper:

For those using the new Template Designer, go to Design - Template Designer - Advanced - Add CSS.
Paste this code:

div.navbar {
opacity:0.0;
display:none;
}
body
{
margin-top:0px;
position: relative;
top: -50px;
}

Curse Blogger for making me spend two days on this!!!!

7/23/2010
Carol Schultz said...
j-
I tried yours and the only modification I needed to make was the last line from top:-50px; to top:-40x;
Maybe it's different depending on the template? Thanks for your help


Related posts:
Another way of hiding the navbar (February 2007)
How to hide Navbar for New Blogger (May 2007)
How to hide New Blogger Navbar (October 2008)

28 comments:

  1. what about replacing the navbar with a google friend connect bar...i don't see how google could get too pissed about that..wuddou think?

    ReplyDelete
  2. I have read Blogger's TOS and there is absolutely no mention of the navbar.

    ReplyDelete
  3. Ur blog dont have "related post widget"

    Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same more...category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

    It will makes visitor to stay at ir site for a long time
    Increase ur site traffic

    Here is the link to get code http://www.idlehub.com/2009/12/related-posts-or-article-widget-for.html

    ReplyDelete
  4. Dear Peter:
    I just used your helpful tips to install Statcounter so I can see how many visits I am getting... Thanks so much for your easy to follow instructions!

    ReplyDelete
  5. Dear Sir,
    i am not fluency in english . but i explain my problem . my blog is www.musicmaasti.blogspot.com . my blog look like funny in mozilla firefox browser . totally small appeared in firefox . different browising is very well . but not mozilla . please give some valuable suggestion to my blog

    ReplyDelete
  6. I have a question about hidding the Navbar.

    If you hide it, how will you manage to log in after hidding it, as this is on the right side of the Navbar?

    ReplyDelete
  7. You will have to choose between the convenience of having a Blogger navbar and its desirability in terms of appearance, etc

    ReplyDelete
  8. Thanks! I implemented it right away and it works great !

    Have a nice day

    ReplyDelete
  9. It's not working for me! The nav bar is gone in the "preview" mode, but reappears on my actual blog?
    http://myblog.webbish6.com/

    ReplyDelete
  10. It definitely wasn't cached (tried on multiple computers, refreshed, checked the code etc.) I'll try the way at your link - thanks for your help!

    ReplyDelete
  11. OMG...it WORKED!!! Thank you, this was very helffull!!!!

    ReplyDelete
  12. Thanks so much it took a few tries with my draftblogger template but the navbar is now hidden, much appreciation.

    ReplyDelete
  13. For those using the new Template Designer, go to Design - Template Designer - Advanced - Add CSS.
    Paste this code:

    div.navbar {
    opacity:0.0;
    display:none;
    }
    body
    {
    margin-top:0px;
    position: relative;
    top: -50px;
    }

    Curse Blogger for making me spend two days on this!!!!

    ReplyDelete
  14. j-
    I tried yours and the only modification I needed to make was the last line from top:-50px; to top:-40x;
    Maybe it's different depending on the template? Thanks for your help

    ReplyDelete
  15. When you remove your navigation bar you can still arrive directly at your blog dashboard by typing in your main web page address bar

    blogger.com/home

    ReplyDelete
  16. True but being lazy people, we tend to want a simple click but we obviously can't have everything

    ReplyDelete
  17. Thank you J & Carol Schultz! I was so lost because of the new designer feature. thankfully I looked at the comments...

    ReplyDelete
  18. What do you mean by "open navbar"? The Blogger navbar is there by default unless you choose to hide it.

    ReplyDelete
  19. You always help with tricks on Blogger, thank you so much.

    ReplyDelete
  20. awesome! thanks so much for posting this for the coding clueless like me :)

    ReplyDelete
  21. After the navigation bar is hidden.Use the web address blogger.com/home then sign in to arrive at your blog dashboard for editing your blog

    ReplyDelete
  22. excellent, the update on css is fantastic!

    ReplyDelete
  23. Great information thanks for his, just the one i am looking for. With your help i was finally able to hide the nav bar in my blog.

    Please have a look http://lifeintech-ryder88.blogspot.com/

    thank you very much.

    ReplyDelete
  24. Thank you so much for sharing. I applied the code and kept adjusting it down until I could see the complete header in the preview pane and I ended up with the last line code as top: -px;

    Thank you again!

    ReplyDelete
  25. You can't imagine how happy I feel now.I've visited million sites only for the solution"how to remove space from over the header".And finally I found it!Thank you dude!I applied it and working exactly what I expected.Thank you again.

    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