Web Design Vista Blog

18 June 2009 | how to, tutorial | iamzen

If you have a blogspot blog you must have noticed the blogger navigation bar at the top of the page. Looks distracting to me!

If you want to know how to hide that navigation bar from displaying, there are 2 tricks – one based on javascript and the 2nd one pure CSS code.

Here i am describing the CSS hack to hide the navigation bar. Javascript code for hiding the navigation bar will be posted later.

Here is what need to do:

Login to your blogger account

Click on ‘Layout’ option

Click on ‘Edit HTML’ option under ‘Layout’ tab

You will be presented with the ‘Edit Template’ screen

Find following line

body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #000000
}

[NOTE: code between body{ } may vary depending on the template chosen]

Just below this code copy and paste the following code -

#navbar-iframe{

display: none;

}

Now save the template and publish.

Thats it, you are done! Check out the blog in a new window. The navigation bar will be gone.