Saturday, April 3, 2010

How To Remove Blogger Navigation Bar in Draft Template Designer

How to delete navigation bar on Blogger Draft template?
How to remove default bar on Draft Template Designer?

The previous method to remove default Blogger navigation bar cannot be used anymore with templates designed from Blogger Draft Template Designer.

blogger draft navigation bar

Here's how to remove the navigation bar on Template Designer's templates:

Dashboard > Layout > Edit HTML

Add this code:

#navbar-iframe {
display: none !important;
}

just above this line:

]]></b:skin>

(instead of below <b:skin><!--[CDATA[/* in the previous method).

Then save it, view your blog and it's done!

---

***UPDATE (3/7/2010)***: It can also be done via this method. Navigate yourself through:

Dashboard > Design > Template Designer > Advanced > Add CSS

And then add this:

#navbar-iframe {display: none !important;}

Click "Apply to Blog" and you're done.

Credit: Comment by Bytexpert

P/S: Click here to view update on its individual post.

56 comments:

The Ultimate said...

hi i tried this on the latest blogger themes.It removes navigation bar but leaves white sectioned div behind check it on my blog http://probloggerteam.blogspot.com/

"Motella" said...

Hi there. Yes I had the same experience as @Ultimate. What are we doing wrong?

Simple Blogger Tips said...

@Motella:
You should change the background colour from #FFFFFF to the colour suited to your blog.

"Motella" said...

Hi there @SimpleBlogger
Thank you for your speedy reply.
Are you able to kindly suggest where I can change this setting?
In the Blogger Template Designer I go to the Advanced, Background tabs and this does not amend the top white band?

Simple Blogger Tips said...

@Motella:
Do it at the "Edit HTML" section. Knowing how to edit HTML will help!

Ninki said...

A way I got around this was finding this bit in the 'edit HTML' section (using ctrl F to find it):

]]>

and inserting this just above it:

#navbar-iframe {visibility:hidden}
}

If you've figured out how to change the background colour of the white stripe, let me know, because I didn't...

Thanks!

Bytexpert said...

You may make it's more easy: Blogger Template Designer/Advanced/Add CSS: #navbar-iframe {display: none !important;}

Thank you for article!

Galit said...

Bytexpert - this is awesome!
Nothing else was working for me before your hint!!
Thanks for sharing!!

Elchin said...

You also need to set height to 0, so putting this in the beginning of template worked for me :
#navbar {
visibility:hidden
display: none !important;
height: 0px;
}
#navbar-iframe {
visibility:hidden
display: none !important;
height: 0px;
}

you can check it in www.asgarli.net

patrick said...

Hi, thanks for this post, and tips are very useful to me... i am waiting for your next post....
www.itemplatez.com

Ravi S Ghosh said...

@Bytextpert:

What you suggested is best as it does not interfere with the template. Still the code leaves white space.

Here is the tweaked code:

#navbar {visibility:hidden; !important;height:0px;}

If you use Template Designer, put the above code in Blogger Template Designer/Advanced/Add CSS

nik said...

wow really helped for my friend's website/blog www.audiored.in

thank you :)

denis stya said...

@Ravi S Ghosh : your way is works, i copy that to Blogger Template Designer/Advanced/Add CSS and works, its easy, thanks to article and u..

Elchin said...

Today visiting my blog I was shocked to see the white stripe. So I updated the code, and now it is as following:

#navbar {
visibility: hidden;
/*display: none !important; */
height: 1px;
}
#navbar-iframe {
visibility: hidden;
/*display: none !important; */
height: 1px;
}

The place remains the same.

Elchin said...

About my previous comment, note that it also works without setting height to 1px, but then there is a transparent stripe which even thought does not drastically impact the design of the page, but occupies extra space of 30px. To remove it I set height to 1px. Setting height to 0px did not have any effect, the white stripe was still there.

Simple Blogger Tips said...

@Elchin:
Perhaps digging into the HTML and change the background colour from white to another colour will work? I have no problems with this template, but not sure of the others though.

NESUA said...

Thank you so much Elchin. !!
Tha change was because, as they've posted, the blogger guys have fixed some bugs of some new templates, and they've changed the code.
Thank you again Elchin

Elchin said...

@Simple Blogger Tips
Changing background color will not for me since I have a picture background, check it on my blog.
This blog has a color background, so you don't really need the solution I have proposed, you can just leave the strip there and set it to the color same as this blog's background color, and it will be flawless.

Elchin said...

@Simple Blogger Tips
I just now noticed that you also have a stripe above taking ~30px of space, but its unnoticeable ;)

@Nesua
You're most welcome :)

Brad Farless said...

Combined Elchin and Bytexpert's suggestions for an instant win. Glad to finally get rid of those navigation bars again. Was hoping this info would surface soon!

Anonymous said...

@elchin:
#navbar {visibility:hidden; !important;height:0px;} in ADD CSS worked! Thnx

IVYALLOVER said...

ok so this may sound really dumb but I have to ask. First, I got rid of the menu bar on top no problem - yippie! thank you...but now how do I get into my blog to edit it? do I have to sign in again and everytime to edit? ALso the bar from the top is removed on my end but is it also removed from a viewers side too? Thanks!

Simple Blogger Tips said...

@IVYALOVER:
You just open a new tab and enter http://www.blogger.com/home on the address bar. done.

IVYALLOVER said...

oh great! thank you :)

IVYALLOVER said...

hmmm ok its not working see...
http://ivyantonio.blogspot.com/home

IVYALLOVER said...

oh nevermind,I got it! Btw does removing the menu in the template remove it when someone is viewing the blog? In other words, when some one views my blog will there be no Blogger menu option on top? If that's the case then nice! The simplier of a look the better for me. Please let me know thanks! :)

Simple Blogger Tips said...

@IVYALLOVER:
enter www.blogger.com/home, not your blog-address/home.. once the navigation bar is removed, no one can see it anymore.

IVYALLOVER said...

perfect thanks! I asked another question over on your other theme - changing background :) thanks!

Aroy said...

Thanks for telling how to achieve this.

Any idea how to make the Gradient Background fixed ? I am using the Simple Blue theme which is first in the list of templates.

Anonymous said...

How do you UNDO this code ?

#navbar-iframe {
display: none !important;
}

Now I can't sign in/out of my blog

Simple Blogger Tips said...

@Anonymous:
Don't worry. Just head to www.blogger.com/home

Anonymous said...

So I just head to www.blogger.com/home and then what will I have to do? Could you please elaborate, thanks?

Anonymous said...

How do you remove the bottom navbar?

al13nat3d said...

works for me perfectly!!!! thanks mate!!!! take a look at my blog at http://clhidohardware.blogspot.com

your a great help!

Simple Blogger Tips said...

@Anonymous 1:
Yeah, just head to that link and you can sign in/out over there.

@Anonymous 2:
Is there a bottom navigation bar? I've never heard of it.

Anonymous said...

Sorry, I meant how do you remove the bottom pad that said -- > Template by Josh Peterson. Powered by Blogger. ?

Zumba fun fitness said...

Hi,
I will try the suggestions here and hope I don't break my blog. I am a real noob, so I hope I can do this and don't end up causing myself more headaches. (Dowl)

Will leave a thumbs up if it works for me.

Thanks heaps

Simple Blogger Tips said...

@Anonymous:
You can remove that manually by looking into the HTML section. Basic knowledge in HTML will be helpful.

Anonymous said...

Hi Simple Blog Tip,
Thanks for your times.

Brad said...

I've tried all of these tips and can't get rid of the bar at the top.

Simple Blogger Tips said...

@Brad:
Did you try the latest updated version? View it here. It works so far, tell me if it doesn't. Thank you!

AZRainman said...

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

This works on b:version='2' class='v2' themes.

aeroskyn said...

Very first version worked for me, and didn't have the white strip. But there was a gap in its place. Any ideas on how to make the gap go away??
The suggestion of putting [[> before the code used didn't work (wrong placing). Look at my site at www.32656.info Maybe it is in the various new templates that we have, similar but slightly different problems. Also need some info on how to get old java script to work in new templates.

The BuchuLife Team said...

Hi

This works for me, but now how do I navigate to the design section of my blog?

thanks

Antadu said...

Thank You....

Its Realy Helpful for me....

Simple Blogger Tips said...

@The BuchuLife Team:
Design section? It should be visible on your Blogger homepage.

Amir Chokr said...

wow! thank you!

Jimmy said...

I have an Image Background For One Of My Networked Blogs .. I Just Changed It's Padding From 30Px to 0px as 30px is the high Of The navbar so try changing It and Good Luck

Mark M. Whelan said...

thank you was able to change my blog into a website..
www.rebellionairefashion.com

Brian Kayser said...

Some templates don't eliminate the whitespace reserved for the Navbar.
Checkout this article which tells you how to get ride of the whitespace.
http://brian-kayser.blogspot.com/2010/10/purge-email-script-for-exchange.html

Brian Kayser said...

Sorry, posted wrong article link in previous post.

Some templates don't eliminate the whitespace reserved for the Navbar.
Checkout this article which tells you how to get ride of the whitespace.

http://brian-kayser.blogspot.com/2010/10/remove-blogger-navigation-bar-navbar.html

Offres d'emploi au Cameroun said...

it is just recently that i knew that it's possible to remove this navbar, my blogs were just bad and so, for long time. In my opinion it's always a better option to remove the blogger navbar because when it's not done, the blog just looks like a novice blog. Thanks so much for the trick!

Brenton Balvin said...

Thank you for the help on this.

NexT said...

*********

If you want to remove the white text at the top, after you have removed the navbar,

simply replace the code you put in before with this code...






THIS WILL WORK! 100%.

nextgenmag.blogspot.com

bpo services said...

hello thanks... It really works. I went to Add CSS.

FV said...

I took off the tab, but now I can't access my blog anymore because i'm using my own domain.

I need some suggestions on how to get back into it.

I learned my lesson with Google's blog service.

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter