The One with How to Get Rid of the Blogger Nav-Bar


Thursday, June 23, 2011

Getting my blog to look the way I want it to takes a lot (and I mean A LOT!) of googling. HTML is confusing and crazy stuff man! It's still complete jibberish to me, but I find that as long as there's a tutorial I can get 'er done. I've noticed that about 95% of my friends who use Blogger have that seemingly pointless/annoying/ugly (harsh much Paige?) Blogger navigation bar across the very top of their blog. (Sorry Allie, I'm using your blog as an example, but in just a few minutes it'll be A-OK!)
Photobucket
Want to know how to get rid of the nav-bar and make your blog nice and clean? IT'S SO EASY! Here's a step-by-step photo tutorial that will only take a few minutes:

Go to your Blogger Dashboard.
Photobucket

Click on Design.
Photobucket

Click on Edit HTML.
Photobucket

Scroll down your HTML until you find the part that says Blogger Template Style/Name/Designer/Etc, it looks like this (but may be slightly different):
Photobucket

Copy THIS CODE IN BOLD:

#navbar-iframe {

display: none !important;
}

and paste it directly under the dashed line (it's highlighted in blue in this pic):
Photobucket

Here's what it should look like unhighlighted:
Photobucket

To see if it worked, click on PREVIEW.
Photobucket

Close out of the preview and then click on SAVE TEMPLATE.
Photobucket
TA-DA! No more fugly navigation bar! A little HTML know-how goes a long way :)

(If for some reason it doesn't work on your blog, email me and I'll try to walk you through it better.)

Next time I'll teach you how to center your blog banner!
Paige Taylor Evans © // Quinn Creatives DESIGN