Toggle [ Hide/Show ] NavBar In Blogger/BlogSpot Blogs


In most of the new blogs based on Blogger platform (either with .BlogSpot or a custom domain) you would have observed that the top-navbar is missing, but Blogger doesn't suggest you to remove the navbar.
Neither Blogger nor Google will penalize you for removing/hiding the navbar, but for providing such a great platform for blogging, according to me every blogger must show their gratitude to Blogger, either by showing a small Blogger Button, or by showing the navbar.

If the navbar doesn't fit well with your present template, then here's a simple script to auto-hide the navbar, but it will be shown to the visitors as soon as they hover their mouse-cursor over it.

To enable the navbar-toggle feature in your blog, follow these instructions:
Log in to Blogger -> Layout -> Edit HTML

Download and save your present template.

Then find(CTRL+F) a code similar to this in the template:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Any code in your template, with id='navbar' and visibility='hidden' hides the navbar completely, so you have to remove this code.

And replace the above code with this one:

/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}
/*Blogger-Help-http://bloggerstop.net*/

That's it !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

45 comments

Write comments
June 11, 2009 5:59 AM delete

Excellent alternative to completely removing the Blogger bar. Another helpful article...

Reply
avatar
June 11, 2009 7:16 AM delete

HEy DS ! love your love,nut can you tell me how to make an animated image that you did in this post !

thnx

Reply
avatar
June 11, 2009 8:05 AM delete

How did you do that? Show the flashing image like that?

Reply
avatar
June 12, 2009 10:03 AM delete

Thanks for the feedback !
Search for "make animated image" in this blog, to create such images...

Regards
Sai

Reply
avatar
June 13, 2009 3:44 AM delete

how did u do tht??anyway its a good hack.i'm gonna post this to my blog now!!thx for this hack,divya

Reply
avatar
June 16, 2009 12:47 AM delete

Thank you, I already use it but it makes my blog looks mess up.

Reply
avatar
June 18, 2009 11:32 AM delete

nice tricks :)

would be happy to know how you wrote Share your views font style in ur comment box :P

Reply
avatar
June 18, 2009 3:26 PM delete

would you like to be member of my forum?i will make you the moderator immediately...
if interested email me at imwatim@ur4m.com
My forum:-www.ur4m.com

Reply
avatar
June 19, 2009 12:58 AM delete

kool..

http://www.2100science.com

Reply
avatar
June 25, 2009 7:16 AM delete

wow this is something new :)

Reply
avatar
July 01, 2009 5:08 AM delete

Thanks for the post!
get Money Blogging Tips and be a successful blogger
http://www.teratips.com

Reply
avatar
July 01, 2009 4:11 PM delete

thanx for sharing.
my blog about blogging and money
http://www.teratips.com

Reply
avatar
July 03, 2009 11:19 AM delete

I am just starting a blog now and said... "I don't like the bar at the top". It was perfect timing for me to read this!

Thanks for this tip!

Website Design Katy, Houston, TX

Reply
avatar
July 03, 2009 1:17 PM delete

Welcome Saul, good luck for your new blog :)

Reply
avatar
July 03, 2009 1:18 PM delete

As you have your own website Saul, so if you want you may create a sub-domain and use it as your blog's address, like this:

http://blog.digitalsqft.net/

Reply
avatar
July 04, 2009 1:22 PM delete

could you please tell me how you altered the linkwithin code to show four related posts instead of the default three posts. Thanks in advance

Reply
avatar
July 04, 2009 1:47 PM delete

Simply shoot a mail to linkwithin team with your blog address & linkwithin widget ID:

http://www.linkwithin.com/contact

that's it, they'll do it for you ;)

Reply
avatar
Astonmaya
July 30, 2009 5:58 PM delete

Thank you for sharing! Your tips are amazing! Keep it up!

Reply
avatar
November 20, 2009 8:33 PM delete

I love this trick very nice

Reply
avatar
December 16, 2009 12:15 PM delete

hai..i'm newbie.. using blogger default template... can't find the code to replace yours...please assist..thanks

Reply
avatar
December 16, 2009 12:25 PM delete

If the code is not there, then find this code in the template:

<style type="text/css">#navbar-iframe { display:block }
</style>

and modify it like this:

<style type="text/css">
/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}
/*Blogger-Help-http://bloggerstop.net*/
</style>

Reply
avatar
December 22, 2009 10:59 AM delete

I too can not find either of the codes you've offered up...yet when I view source on the blog itself I see all sorts of code related to the navbar. Has Blogger gone to Javascript or hidden some more of the code from us?

Reply
avatar
December 22, 2009 11:10 AM delete

Hi Ashlea,
I have checked your blog, here's the code that you have to replace:


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


PS: In your blog that code is just below these 2 lines:
/* Header
-----------------------------------------------
*/

Reply
avatar
December 22, 2009 11:16 AM delete

Ha...I just added that code a few minutes ago. I was trying to get your autohide to work so I thought I'd put some code I knew work into the template just to see if I was still able to remove the navbar completely. Even when I remove the code you noted and add the code you suggest, the autohide isn't working. Something in IE7?

Reply
avatar
December 22, 2009 11:18 AM delete

I'm not seeint the #navabar id anywhere.

Reply
avatar
December 22, 2009 11:58 AM delete

Of course you are not given access to id=navbar
you can control it only through the css part of the template (that means #navbar-iframe)

So when you added that previous code, navbar hid completely right?

So now, simply add this code and ask me to check it. Actually here the toggle means navbar will be shown when hover your cursor in the top 10 pixels region of your blog.

BTW the pics on your blog are really beautiful, great going !!!

Reply
avatar
December 22, 2009 12:01 PM delete

Forget the tutorial above, and Exactly follow these two steps:

STEP #1"
FIND THIS CODE:
/* Header
-----------------------------------------------
*/


STEP #2
And immediately BELOW it paste this code:

/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}
/*Blogger-Help-http://bloggerstop.net*/


STEP #3
Save the template and check out your blog. and tell me if it worked or not :)

Reply
avatar
January 21, 2010 12:41 AM delete

argh! not working on IE (again...IE...giving me so much trouble). fine with firefox.

in IE, the navbar "seems" to be there but will not show at mouse-over, completely invisible. but the links that are supposedly available on navbar can be clicked although they're invisible. em...i don't know how to explain but can u help on this?

Reply
avatar
January 21, 2010 8:28 AM delete

Hey there,

In your blog, there are two codes for the navbar, which is confusing IE. One code wants to hide the navbar completely, whereas other one is adding toggle effect to it. So remove the code which is hiding the navbar completely.

Reply
avatar
January 21, 2010 8:29 AM delete

@smiley,
here's the exact code you have to delete completely:

/*this code is to hide completely--- #navbar-iframe {
height: 0px;
visibility: hidden;
}---*/

Reply
avatar
March 15, 2010 7:43 PM delete

Hi I went ahead and used your code to make my nav bar toggle which is great. Do you know how I can hide the white spot left up there when it is not visible?

Thanks for your time,
Ken

Reply
avatar
March 16, 2010 9:23 AM delete

Well, do not remove the height variables in the code. Make the height "5"/"10" in the hidden state (but not 0).

And also make the padding in this code "0px" from "15px":

#wrap4 {
background:url("http://www1.blogblog.com/harbor/center_cloud_left.jpg") no-repeat 50% 0px;
padding:15px;
width:100%;
width/* */:/**/auto;
width: /**/auto;
}


Regards
Sai

Reply
avatar
Anonymous
March 16, 2010 2:32 PM delete

Sorry I am so new at this. Here is the code I used:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0);}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100);}
Do I add the other code you show above to what I already have?

Reply
avatar
March 22, 2010 11:20 AM delete

I have resolved this issue on pure javascript with state of navbar saved in cookies. You can find the description following by this link - http://with-love-from-siberia.blogspot.com/p/blogger-navbar.html. Sorry, this is in Russian but you can translate it with Google.Translate.

Reply
avatar
March 27, 2010 12:21 PM delete

thanks, sai. i think you're rite. i have the same prob with some other codes where i use the "/*hide--/" tag. it din hide the text meant for my own reference :P!

Reply
avatar
June 12, 2010 9:02 AM delete

Hi Team,

I appreciate most of the solutions proposed.

I have anyway a small prob: I am not finding at all the code (the various options above listed) in my blog to can install the hide / show navbar as shown above.
Please could you help ?
Regards

Reply
avatar
June 12, 2010 9:18 AM delete

Okay, do not try to find any code in the template, simply paste the second code directly above this line:

/* Page Structure

Reply
avatar
July 24, 2010 12:57 AM delete

I was able to get the navbar to auto-hide, but now for some reason there is a slight gap between the my browser and the top edge of navbar??? Does anyone have any idea how to fix that, I'm also running Friend Connect Social Bar on the bottom, and i was thinking that that might be causing some problems or something... Really what happens is the page loads, then after everything is loaded the whole page drops about 1-2mm bring the navbar with it... So if the window didn't shift after loading, then the navbar would seat just fine... Any help would be appreciated...

Reply
avatar
July 24, 2010 1:31 AM delete

nevermind, it just fixed itself...

Reply
avatar
October 01, 2010 2:13 PM delete

Yes!! It's working nice. :)
Who doesn't find the #navbar ID, I suggest them to put the style code of comments No.23 that Sai says after/below </header tag.
It's will work fine.

Reply
avatar
June 21, 2011 12:44 PM delete

really wounderful. very useful 4 my blog.. thank u..

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon