Disappearing Nav Bar Tutorial

This is one of my favorite Blogger tricks! You know that colored strip at the top of your blog that is really handy, but not very cute? It's called a nav (or navigation) bar. There are lots of tutorials out there that can show you how to delete it, but there are a couple problems with getting rid of it altogether. Numero uno, you can no longer access the handy links contained in your nav bar. Also, it most likely violates Blogger's terms of use. So...how can you make your blog design look better and more custom without losing the features of your nav bar or doing something illegal? Read on, friends!

I'm going to show you how to create your own magical disappearing nav bar. It will only be visible when you scroll over it with your cursor, as you can see demonstrated on this blog. Now you see it, now you don't. :) Cool, right?

• First, log into your Blogger account and go to your Layout/Page Elements page.


• Now click on the tab that says "Add a Gadget"


• A pop-up box will appear and you will click on the "HTML/JavaScript" button

{Click on images for enlarged view}

• Now, copy and paste the code below in the blank text box and click "Save"
  
  
<!-- 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 -->

  
  

That's it! Easy peasy! Now you have your very own super fancy peek-a-boo nav bar. :)

Just FYI for those of you who don't know... You can change the color of your navigation bar from your Layout/Page Elements page. Just click the "Edit" button, select your color, and then click "Save" as demonstrated below.

Halloween Header Freebie

Lots is going on at ShabbyBlogs.com! More buttons and blinkies are on the way as well as headers to match your favorite shabby backgrounds. I have had so much fun cooking up new goodies for you! While I get ready to post them, please enjoy this spooktacular freebie- a Halloween header for you to customize any way you'd like! I can't wait to see your bootiful creations! :)

Halloween Header Freebie:
Download