Friday, 31 July 2009

Remove Blogger NavBar

Although Blogger makes blogging easy, the Navbar at the top of the screen can detract from the professional look that you may wish to give to your blog or website.

To remove the NavBar, all you have to do is insert some code into your template. This is easy if you follow these instructions....

1). From you Blogger DashBoard, choose the Settings option for your blog/website.
2). Choose the Layout Tab and then click on the Edit HTML option (you may want to back up your template first - always a good idea!)
3). Now insert the following line of code into the template Immediately above the line that reads... body {

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

4). Save the template and view your blog - the NavBar will have disappeared.

All the best

Keith (

1 comment:

Geoffrey said...

Hi Keith

I found hiding the Blogger navbar wasn't quite as easy as you suggested. The iframe CSS caused the navbar to be removed but my Blogger template still left a lovely gap at the top where the navbar used to be.

I wasn't able to fix this with changing the CSS in the header as Blogger was then putting its own CSS in to shift the 'wrap' DIV down, so I fixed it through brute force by adding an extra style definition into the Blog <BODY>:

<div id="wrap" style="margin-top:0px;">

Now works fine with no resultant navbar or gap - see my Brittany Gite Blog.

This may only be a limited problem as I'm using a Blogger v1 template.

Cheers, Geoffrey

Post a Comment