How to Remove and Hide Blogger NavBar (Top Navigation Bar)
When browsing Blogger powered weblogs hosted on blogspot.com domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.
No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the Blogger blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.
Turn Off and Disable NavBar in Blog Published by FTP or SFTP
- Login to Blogger.
- On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.
- The Edit HTML page under Template tab should be loaded. Click on the drop down box beside Change the Blogger NavBar and select Off.
- Click on SAVE TEMPLATE CHANGES button when done.
Remove and Hide NavBar in Blogger Widget Template
- Sign in to Blogger.
- On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.
- Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.
- Search for the following line of code:
]]>Before the line, add in the following line of code:
#navbar { display: none; }or:
#navbar-iframe { display: none !important; } - Click on SAVE TEMPLATE to make the change effective.
Remove and Hide NavBar in Blogger Classic Template
- Login to Blogger.
- On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.
- The Edit HTML page under Template tab should be loaded. If not, go to the tab.
- Search for the following line of code:
</style>Then, add the following line of code before that line:
#navbar-iframe { display: none; }The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Widget Template too.
- After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):
body {Add in the following like of code after the body tag:
position: relative;
top: -32px; - Click on SAVE TEMPLATE CHANGES button when done.
Tip: To display and show NavBar again, just remove and delete the additional codes that have been added.
Related Articles
- How to Remove and Hide “Libraries” Group from Navigation Pane of Windows 7 Explorer
- How to Delete Blogger Blog
- Add Page Number (with First and Last Page) Navigation Link for Blogger (Blogspot) with Gadget Element and Manual Hack
- Add and Insert to Put Google AdSense Ads Units Between Blog Posts in Blogger.com
- How to Wrap AdSense Ads Around and Inline Beside Blogger Post Content
- Block, Hide and Remove Windows Live Mail Ads
- Implement Ad Revenue Sharing in Blogger (Supports Google AdSense And Any Code)
- Move Blogger Inline Ads Between Posts to Inside Within Post Position
- How to Hide or Show Libraries in the Navigation Pane of Windows 7 Explorer
- Workaround to Add Custom Channels into Blogger AdSense Page Element Widget
Entries (RSS)
December 4th, 2009 01:19
Awesome!!
It works perfectly…
thnx for sharing…
December 3rd, 2009 20:18
I registed on blog last month. I could not find any thing related to #navbar in the HTML code.All I saw is
Is that mean they closed that door for us to do hide the blog link.
Thanks
November 28th, 2009 11:32
THANK YOU SO MUCH! IT WORKS GREAT!
November 14th, 2009 08:25
It works great, but how to then access my Dashboard? I can no longer sign out either….
November 12th, 2009 18:56
Here’s an odd problem. I’m using the widget template. In my browser (FF 3.5, linux) the line of text is fine. But on other machines with other browsers, there seems to be the white line above. I’ve tried putting in the 32 pixel bump, but that makes the top disappear from when it’s in my browser. Any way you can think of to make that line of text browser or system sensitive?
October 17th, 2009 04:12
I love you. o.O
I knew the code before, but I had no clue where to put it xD
October 14th, 2009 01:08
Thanks alot my blog looks much better without the nav bar
September 29th, 2009 14:09
I am still unable to remove the space with the position: relative;
top: -32px;
I am using the classic template what else could be wrong?
Here is the page http://ericksonkytest.blogspot.com/
September 25th, 2009 15:16
At last – wow , that took months to get right and now that it works , i am just ecstatic. Thank you so much. The code that did it for me was the insertion of:
#navbar-iframe { display: none !important; }
just before the ]]>
i am using one of the templates that come with blogger, but not the classic
September 12th, 2009 11:44
Fantastic. The directions worked perfectly. Many thanks.
September 4th, 2009 20:04
thanks a bunch works a treat
August 21st, 2009 05:54
Thanks very much for the information, very informative!
August 17th, 2009 18:00
This is great. Thanks for this post. It helped really well.
August 7th, 2009 18:55
thanks for the tip. works like a charm
July 19th, 2009 21:47
Thank you – this helps so much in apperance of my website – that nav bar was so blah on my site.
June 28th, 2009 21:18
Muchas gracias
June 8th, 2009 14:48
this is a realy working article
May 31st, 2009 07:15
Great tip! Thank you so much!
May 20th, 2009 04:46
THANK YOU SO MUCH!!!! this was so easy and helpful.
May 19th, 2009 05:07
thank you for this wonderful tip!!
May 18th, 2009 18:33
A very cool and easy trick.Thanks for the tip.
May 9th, 2009 00:46
great tip!
works for me – I’ve incorporated my blog into my company website using an iframe to drop it in below the main top section & nav for the site, thereby maintaining the overall look & feel of the site – the nav bar would ruin the effect, so it’s great that this tip works!
May 6th, 2009 08:02
Worked like a charm! Thanks a million!
May 4th, 2009 00:09
worked like a charm. thanks!
April 20th, 2009 14:53
Thanks
April 17th, 2009 00:07
Awesome! Thank youuuuu!
April 9th, 2009 00:38
A very good trick and thanks
April 5th, 2009 08:22
Wow, this is amazingly accurate. Thank you so much.
April 4th, 2009 03:55
Thanks!
April 3rd, 2009 23:26
Thank you!!! : )
March 29th, 2009 04:55
Thanks! That was so easy…
March 27th, 2009 08:46
Great job!
March 13th, 2009 02:46
this is exactly what i was looking for. thank you!
March 10th, 2009 16:12
thanks a lot!
tips of ‘top: -32px;’ one is really helpful.
March 6th, 2009 21:50
Is it possible to leave the bar but JUST remove the “next blog” button? Thanks in advance!!
February 22nd, 2009 00:57
Done, thx for the tip!
February 8th, 2009 10:01
Thankyou so much, you are a god.
I have always hated the navbar!
Thankyou Thankyou
February 8th, 2009 08:35
Thanks! That bar has always bugged me…
January 27th, 2009 23:26
Wow, thanks! It is mind-boggling how so many people tell to do things and it never works. This worked instantly. No problems. Thanks again.
January 23rd, 2009 15:27
It really help me a lot, thanks for such a good and informative content. Thanks again….