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.
Here's how to remove the navigation bar on Template Designer's templates:
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:
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.
55 comments:
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/
Hi there. Yes I had the same experience as @Ultimate. What are we doing wrong?
@Motella:
You should change the background colour from #FFFFFF to the colour suited to your blog.
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?
@Motella:
Do it at the "Edit HTML" section. Knowing how to edit HTML will help!
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!
You may make it's more easy: Blogger Template Designer/Advanced/Add CSS: #navbar-iframe {display: none !important;}
Thank you for article!
Bytexpert - this is awesome!
Nothing else was working for me before your hint!!
Thanks for sharing!!
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
Hi, thanks for this post, and tips are very useful to me... i am waiting for your next post....
www.itemplatez.com
@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
wow really helped for my friend's website/blog www.audiored.in
thank you :)
@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..
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.
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.
@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.
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
@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.
@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 :)
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!
@elchin:
#navbar {visibility:hidden; !important;height:0px;} in ADD CSS worked! Thnx
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!
@IVYALOVER:
You just open a new tab and enter http://www.blogger.com/home on the address bar. done.
oh great! thank you :)
hmmm ok its not working see...
http://ivyantonio.blogspot.com/home
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! :)
@IVYALLOVER:
enter www.blogger.com/home, not your blog-address/home.. once the navigation bar is removed, no one can see it anymore.
perfect thanks! I asked another question over on your other theme - changing background :) thanks!
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.
How do you UNDO this code ?
#navbar-iframe {
display: none !important;
}
Now I can't sign in/out of my blog
@Anonymous:
Don't worry. Just head to www.blogger.com/home
So I just head to www.blogger.com/home and then what will I have to do? Could you please elaborate, thanks?
How do you remove the bottom navbar?
works for me perfectly!!!! thanks mate!!!! take a look at my blog at http://clhidohardware.blogspot.com
your a great help!
@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.
Sorry, I meant how do you remove the bottom pad that said -- > Template by Josh Peterson. Powered by Blogger. ?
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
@Anonymous:
You can remove that manually by looking into the HTML section. Basic knowledge in HTML will be helpful.
Hi Simple Blog Tip,
Thanks for your times.
I've tried all of these tips and can't get rid of the bar at the top.
@Brad:
Did you try the latest updated version? View it here. It works so far, tell me if it doesn't. Thank you!
#navbar {
height: 0px;
visibility: hidden;
display: none;
}
This works on b:version='2' class='v2' themes.
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.
Hi
This works for me, but now how do I navigate to the design section of my blog?
thanks
Thank You....
Its Realy Helpful for me....
@The BuchuLife Team:
Design section? It should be visible on your Blogger homepage.
wow! thank you!
thank you was able to change my blog into a website..
www.rebellionairefashion.com
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
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
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!
Thank you for the help on this.
*********
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
hello thanks... It really works. I went to Add CSS.
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.
Post a Comment