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

1. Login to Blogger.
2. 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.

   

3. The Edit HTML page under Template tab should be loaded. Click on the drop down box beside Change the Blogger NavBar and select Off.

   

4. Click on SAVE TEMPLATE CHANGES button when done.

Remove and Hide NavBar in Blogger Widget Template

1. Sign in to Blogger.
2. 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.

   

3. Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

   

4. 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; }

5. Click on SAVE TEMPLATE to make the change effective.

Remove and Hide NavBar in Blogger Classic Template

1. Login to Blogger.
2. 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.

   

3. The Edit HTML page under Template tab should be loaded. If not, go to the tab.
4. 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.

5. 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;

6. 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

This entry was posted on Monday, January 12th, 2009 at 3:45 am and is filed under Weblogs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.