How to remove or hide Navbar in Blogger?

November 4, 2008

WHAT IS BLOGGER NAVBAR?
Blogger Navbar appears by default at the top of every Blogger-powered blog.
When you are blogging, Navbar can be very useful thing, but sometimes, it can get in way...


The advantages of Navbar are:
- easily searching for other blogs
- "flagging" the desired blog (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog
- quick link to your Dashboard and "Sign in /Sign out" dialog
- click on the B sign takes you to blogger.com

The only real disadvantage is visual. If you have customized design, Navbar usually doesn't fit in.

CHANGING, REMOVING OR HIDING THE NAVBAR

You have 3 options here:
1. to change the current color of the Navbar
2. to remove it
3. peek-a-boo ► it will appear when you place the mouse cursor on it

1.From the DASHBOARD ► LAYOUT ► PAGE ELEMENTS, click on "Edit" in the NAVBAR box, and you can choose between 4 differnt color designs.



2. Well, if you've decided to REMOVE your Navbar, follow this instructions...Before you do anything, back-up your little template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML, and in the code section find the following line (it's right at the beginning):

Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Place the following code right under that:

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

SAVE the Template. And VIEW the Blog.

Some folks reported that placing code like above, mess up their template. In that case, you should place this code ABOVE the code in orange (it won't be orange in the code):

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

]]></b:skin>
</head>

3. There's another way of showing a Navbar. It's called: "Hover Peek-a-boo Blogger Navbar". Credits to the author BLOGGERATTO.
It's a way to hide the Navbar, but when you hover around the area on the top, it pops out...See preview here.

Here's a part of code you should inert for that effect (in the same place like example above):

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)

You should keep in mind that it's not compatible with:
- IE6 & IE7 (there, it's hidden completely)
- works for Opera 9.0 and up

With Firefox, Iceweasel(linux),Flock, MZS6,Netscape, Safari & camino(linux), it works perfectly...

Smile!