Wednesday, July 25, 2007

Hide that Navigation Bar of Blogspot Blog

I never felt the need of navigation bar which always get appear with all the blogspot blog. Finally I found some cool ways (say hacks) to hide this nav bar from any blogspot blog by just adding few CSS line.

To start with list of different solutions, I will first suggest my own hack. Here is the cool one line solution by me which will work with new Blogger template.

/* Deep C Solution:
----------------------------------------------- */
#navbar-iframe { height: 0px; }

Just add above line in your blogger template in CSS style section inside head tag. This will simply reduce the size of nav bar to 0(zero) pixel and it won't be visible anymore.

Now here is the list of other solutions suggested by different bloggers. I also tried these solutions which are working fine to hide nav bar from the blogspot blog.

Here is the first solution as suggested by Amit Agarwal in his blog :
Add this code anywhere in the blog template within style tag:

This blog also suggest one more solution as:
/* By Aditya
----------------------------------------------- */
div.navbar {

Another solution as suggested by Praveen in his blog :

/* Apnerve hack code
more info @:
----------------------------------------------- */
#navbar #Navbar1 iframe{

or try this CSS code:

display:none !important;

Now final word: I am not sure if its legal or not to hide that nav bar from the blogspot blog.

If you know any other solution to do same functionality of hiding the nav bar then do aware me also.


praveen said...

Thnx for mentioning my blog. BTW there is a mistake in my code. I used visibilty:none;(which is syntaxically wrong and moreover it is unnecessary).
Simply applying the rule for iframe would be a better hack, as we don't use iframes generally.

Deep C said...

Hey Praveen, Thanks for comment and informing us about the mistake and also giving us more information about the same.

pepebe said...


iframe {position: absolute; top: -100px;}

This will move the iframe upwards above the top of the screen.

Game Crawler X said...

Every option you gave removed the nav bar but destroyed my layout... not sure if it's OK to do that unless you have a template without bg images and stuff. I think it would take me a long time to remove the nav bar and get my template aligned properly. Do you have any suggestions?

Ozo said...

Doesnt work
but i wrote :
display: none !important;
almost at the top before:
/* Variable definitions
or after the template name comments
checkout my blogs as an example: and

D S said...

Thanks dear,
i used forst one - #navbar-iframe { height: 0px; }

and it really works nice.
Thanks for value able information.

web designer,web design India said...

Thanks u r information

bollywood girls said...

i like your blog ....

dpanupam said...

Thats a very interesting post. I have been inspired. Thanks. Web Designer

sinus relief said...

thanks for the tips..


jasper said...

just new in the business but this is a very cool post....kip it up!

vedat said...

thanks friend. helped me too.. greetings from Turkey...

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

take acomplia said...

This navigation bar helps me.

best download software said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful.