Hide the Blogger Navbar using CSS

Here is a small bit of CSS code that hides the navigation bar at the top of blogs hosted by Blogger. Like using Blogger but don't like that nav bar? Here is how to do that.

To be clear, the thing we are talking about hiding is the bar that looks something like this:
This is the bar with a search box and buttons to follow or report the blog and a button to navigate randomly to another blog.  If you want to keep these, read no further.  If you'd like to hide this navigation bar - i.e., you don't really want visitors to your blog navigating to some random blog or you don't have your blog setup for 'followers' - then read on.
Now that Blogger doesn't support publishing blogs to other servers (i.e., using FTP) there isn't really a way to turn off this navigation bar exactly - all of the Blogger templates will include it.  But, using a very small bit of CSS, you can include in the HTML that goes to the visitor's browser some instructions that usually will case the visitor's browser not to show this nav bar.

That code is simply
    #navbar { display: none; }

You insert this code into the CSS and HTML for your blog by going to the Blogger control panel, selecting "Design" from the top tab, and then clicking on "Edit HTML".

What you will see is a mix of HTML, CSS and XML code that is the template for building your blog.  Explaining all of this is another (much longer) subject but for our purposes of hiding the nav bar all you have to do is find the right place to insert the text above.

That place is right at the very end of the existing CSS code - lots of lines that begins with "." or "#" and has lots of "{" and "}" symbols.  You need to insert this just a little bit before the trailing "head" element.

That means you go from something like this







to something like this:









Note: You won't see the inserted text with the blue background; I've added that just to highlight what is different.

While extensive changes to the HTML text will break your ability to use the template designer, this little change will not.  You will still be able to add page elements and use the template designer to change many aspects of your design - e.g., colors, column widths, etc.  The Blogger template designer make these changes to your template and your insertion of this bit of code to turn of the nav bar will continue.

However, if you switch templates, that is go from the "Picture Window" template to the "Watermark" template - blogger reloads a whole new set of HTML, CSS and XML code that is used as a template for your blog and the CSS text you added to turn off the nav bar will be lost.  You'll have to add it again.

No comments: