Recognized Expert
Go Back   Recognized Expert > Blogger Video Training
Welcome, .

Tags Groups FAQ Members List Calendar Today's Posts

115. Hiding The Blogger Navigation bar


How do I remove the Blogger navigation bar?

If you really want your blog to look like a website, you’ll want to hide the Blogger navigation bar at the top of the page. There are many reasons you’ll want to hide it and Bob is going to show you how to do it in this video.

Click Here to get the code you’ll need for this video

Learn:

  • How to hide the Blogger navigation bar at the top of your blog
  • How the Blogger navigation bar works
  • Where to place the code in your template to hide your Blogger navigation bar

22 Comments »

  1. Comment by Thoughts Uncensored
    March 8, 2008 @ 8:47 pm

    WOW it works ^_^ thanks a ton!

  2. Comment by FDPC
    March 22, 2008 @ 11:15 pm

    Hey, can anyone provide me with a copy of the magic Code to be insert into the Template? I’ve tried following the link to download that code, but it leads me to somewhere that says I can’t access XML code or something like that.

    Any help please?

  3. April 26, 2008 @ 11:55 pm

    [...] don’t  understand is the amazing customization you can do with Blogger. For example, you can remove the Blogger Nav Bar from your header easily. You can easily accept credit cards on your Blogger blog and much more. [...]

  4. Comment by Brenda
    June 18, 2008 @ 1:00 pm

    If the navigational bar is hidden how do we sign in and work on the blog at a later date?

  5. Comment by Josh Sommers
    June 18, 2008 @ 2:38 pm

    To log in at a later date you need to go to http://www.blogger.com and log in. Once you are authenticated you will be taken directly to your dashboard.

  6. Comment by Brenda
    June 20, 2008 @ 3:04 am

    The code it shows for the download didn’t work for me and it doesn’t look like what’s on the video. What am I missing? Help…. did I download the wrong code?

  7. Comment by Josh Sommers
    June 20, 2008 @ 1:46 pm

    You need to add the following code to the CSS section of your Blogger template.

    #navbar-iframe {
    display: none;
    }

    That should remove the navBar

  8. Comment by Lixia Jin
    August 25, 2008 @ 2:05 pm

    thank you for the code. i got it now. it really help.

  9. Comment by Lixia Jin
    August 25, 2008 @ 3:15 pm

    I put the code in the right place. The navBar removed, but lots html code show on my blog. I don’t know why. I need help.

  10. Comment by Cathy
    December 3, 2008 @ 9:26 am

    First, THANK YOU for this series! Thanks to your videos, an idiot like me made a good looking blogger website for a friend’s business! I didn’t think it could be done (certainly not by me, anyway.)
    Second, I am trying to remove the navbar and following your directions, it also removes the little pencils! Without the little pencils, I cannot edit anything! Is there a way to take out navbar without losing one’s pencils? (Let alone one’s marbles?).
    You are EXTREMELY likable indeed to provide such a fantastic free resource on the web! Thanks again!

  11. Comment by carla
    December 24, 2008 @ 5:58 am

    whats the code to hide nav bars on youtube videos??
    can anyone help??

  12. Comment by Julie
    January 6, 2009 @ 8:18 pm

    Hey, can anyone provide me with a copy of the magic Code to be insert into the Template? I’ve tried following the link to download. What do I do when there is no CSS and in the vidio said some thing to templates.template and in my html I can not find the css I and the link code dose not have the end on it. I tryed to put it between the and and befor the and said I was going to lose my wigets, then i viewed my blog and my whole site look like a html I thought I had lost every thing but I fix it. But I would like to hide my Blogger Navigation bar. so if some one could help me!

    Any one can you help?

    Thank Julie

  13. Comment by Julie
    January 12, 2009 @ 1:14 pm

    In the all the tranning viedo on making you blog looking like a web page has been really good. Very thing has worked really good tell I got to the hide the Blogger navigation bar the html code dose not work.

    Can someone help with the right html for the navigation bar. thank you

    Julie.

  14. Comment by rita
    January 23, 2009 @ 7:35 pm

    Unfortunately, neither the code provided for this video, no the code posted by Josh here, in comments, doesn’t work for my template. I have a standard Blogger template — nothing fancy. And I did copied the code into the CSS section.
    Any help would be appreciated. Thank you.

  15. Comment by Josh Sommers
    January 26, 2009 @ 11:52 am

    Try adding the following code to the CSS portion of your current template.

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

  16. Comment by Michelle
    September 27, 2009 @ 11:43 am

    I’m having the same problem with all the html code getting on my site when I tried to remove the nav bar. The nav bar was gone, but all that other text no good. Tried the original code from the video and then the additional code with it but no luck.
    Can you help?? I’m not sure what I’m doing wrong…
    Thanks!

  17. Comment by bloggle
    December 2, 2009 @ 7:44 pm

    thanks. after some unsuccessful attempts i tried josh sommers’ and it works. thanks guys for the tips and post some more blogger tips. more power

  18. Comment by Mirland
    March 10, 2010 @ 5:15 am

    Try this: It works :)
    /* KILLING THE NAVBAR */
    body #header {margin-top:0;}
    #navbar-iframe {display:none;}

  19. Comment by Mirland
    March 10, 2010 @ 5:55 am

    To make the above work in Chrome add !important to margin-top:0

  20. Comment by Josh Sommers
    June 24, 2010 @ 12:32 am

    Thank you for the fix!

  21. Comment by Josh Sommers
    June 24, 2010 @ 12:32 am

    Thank you :)

  22. Comment by Pilu
    November 13, 2010 @ 10:26 pm

    Thinks for cooperate me.I try many tricks but all are useless.Many days i wish to hide navbar on my blogger http://psd-collection.blogspot.com/

    /* KILLING THE NAVBAR */
    body #header {margin-top:0;}
    #navbar-iframe {display:none;}

    This tricks hide my bloggers navbar.

    Thankyou

RSS feed for comments on this post. TrackBack URI

Leave a comment



Copyright Sommers Communication 2008