Dropdown Navigation Bar For Blogspot

Last update: 2008-02-13

There are many tricks to remove the Blogspot Navigation Bar (or "NavBar") that is displayed on top of all Blogger blogs. The simplest would be to add the following CSS declaration to the bottom of the "skin" section of your template (i.e. in between the <b:skin> and </b:skin> tags):

#navbar{
    display:none !important;
}

Besides the question if this approach violates the Blogspot "Terms of Use", this will leave people who are flipping through blogs via the "next blog" link lost. Additionally, as blog editor, you loose your shortcut links to sign in and post new messages.

Why not hide it, but still keep it accessible, more or less like a dropdown menu. To achieve this, add the following code to your template, or add it to your blog layout as a html/javascript page-element:

<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

Now, the navbar is shifted up, with its content outside the viewport frame and thus out of sight for the user. The navbar is doubled in height, with an empty, transparent part still invisibly dangling at the top of the viewport. When the mouse cursor hovers over the empty part of navbar, the navbar is repositioned into its normal position and the doubled height is removed. When the mouse cursor leaves the navbar, the styling is reaplied and the navbar hides itself again.

You can see this effect in action on this page, just scroll to the top of the page and move your mouse to the top of the viewport.

The mouseover effect is achieved by applying a :hover pseudo-class to the navbar element. This works in Firefox 2.0, Safari 3.0 Win, Opera 9.5b, iCab 3.0, Konqueror 3.5.7 and Internet Explorer 7, although the latter only when rendered in strict mode. For older IE browsers (or possibly IE 7 in quirks-mode), a javascript fallback is activated through a conditional comment that is only visible to Internet Explorer 6 and lower. When javascript is disabled the navbar will not be hidden.



Note: Most blog templates have a strict doctype declaration (second line in the template), which is fine. If you are rendering your page in quirks mode (i.e. dtds Transitional or Loose), you need to change the conditional comment to [if lte IE 7].



I chose to position the navbar over my design (position:relative), if you don't want it to overlap with your design, change the position to static.

Update: It is not against Googles Terms Of Service (TOS) to hide the NavBar. The Real Blogger Status blog posted a link to an answer to this question from a google employee.