Removing the Navbar and the Search Box in Blogger

Blogger is a great service which allows just about anyone establish a web presence quickly. When you sign-up initially, you have several templates to choose from. While there's nothing wrong with these, I didn't care for the standard navigation bar (navbar) that was placed on the top of the page. I still will give the user the ability to search but I want to style the search facility myself rather than rely upon the cookie cutter look.



Blogger will let you change the color of the navbar, say from navy to brown, but I could not find an easy way to just turn off the navbar completely. So it looks like I need to change the Blogger code to make it do what I want.

I brought up my blog in Firefox in order to use its debugging tool, the Firebug. If you have the Firebug installed in your computer, you simply press F12 which brings it up and then choose "Inspect" and hover over the area to see the corresponding HTML in the lower "firebug" window. If you don't, you can look at the code snapshots here to get an idea of what's going on in the Blogger code.



As you can see in Figure 1, when I hover around "navbar" div, the top navigation bar is highlighted in blue. That means by hooking into the "navbar" from Blogger CSS, I can get rid of this bar completely. The code is only one line. Here's a snapshot of where I placed it. By the way it doesn't really matter where you put it
in your stylesheet, I happen to do it right after the body declaration:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

/*CSS Bakery code for removing the Blogger search from the top*/
#navbar { display: none; }

Just a few words on display. Every element in CSS has a display property. The values used most frequently are inline, block, and none. When display is set to none for a certain element, that element and any elements nested within are no longer displayed on the page. In terms of the flow, the space that belonged to the element no longer exists, as it completely removed from the flow.



After removing the top search label, I wanted to shift everything else up by about 10-20 pixels for a neater look. Again I brought up the page in Firebug and hovered around the area I wanted to move to see which div was responsible for the gap. It looked like this time it was the "outer-wrapper" div that had to be tweaked. Original code looked like the following:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 950px;
margin:10px auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

which I changed to margin: 0 auto 10px; to zero out the top margin.