Blogger Trick: Hide that Gaudy Blogger Navigation Bar using navbar-iframe Style

You can spot the rank and file Blogspot blogger from a mile away when you come across a site that has this…

…across the top of the toolbar.  By default, Blogger places its own navigation bar at the top of each of the blogs it hosts.  The problem with this generic navigation bar is that it looks somewhat awkward, and it just doesn’t fit with most themes on most web sites, and most bloggers would rather not have its imposing presence glaring from the top of their carefully constructed masterpiece.

So how do we remove the nuisance navigation menu?  Your first response might be, “Just find the place in the template XML file where that particular “widget” is added, and remove it.  The problem is Blogger secretly puts the navigation bar into your blog outside of what can be edited using widgets.

If your Blogspot blog still has one of these clumsy headers, you can find out who the culprit is by viewing the source for your blog.  You will notice a line that looks like this:

<iframe src=” […] marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ height=”30px” width=”100%” id=”navbar-iframe” title=”Blogger Navigation and Search”></iframe>


You notice that Blogger magically inserted an iframe at the top of your blog.  To get rid of the navigation bar, you need to get rid of the iframe.  Well, you can see that the iframe uses a style called navbar-iframe.  To turn off the navigation bar, we can simply change the style definition for navbar-iframe.  Changing the style definition is something that can in fact be done from the Blogger Layout->Edit HTML menu.

There are a few different ways you can tell the navigation bar iframe not to display itself.  Among the most popular is to place this style definition in your Blogger template XML file:

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

This style definition does two things.  First, it tells the iframe tag not to display itself.  Second, it tells the browser (!important) that this style doesn’t want to be overridden by another definition.  You may have also noticed when you viewed the source for your offending blog that there was already a style defined for  navbar-iframe:

<style type=”text/css”>#navbar-iframe { display:block }



This style needs to be trumped by our don’t-display-the-navigation-bar style, so we use the !important attribute.

If you paste the CSS style above into your XML template file (put it with the rest of the style definitions), save the updated template, and refresh your blog, you’ll notice the navigation bar is gone.

One thing to consider if you’re building a Blogger template without the navigation bar is that it might be handy for the bloggers using your template to have a quick way to edit their particular blog.  A good way to accommodate this is to include an Edit link that takes the user to his Blogger dashboard.

Leave a Reply

Your email address will not be published. Required fields are marked *