Guest Post By: Patty Trends
You have probably noticed that as soon as you access Patty Trends blog the Blogger navigation bar (aka “Navbar”) on the top of the page disappears. Cool huh? That navbar actually used to bother me, it just didn’t make my blog look nice and customized… But I heard that if you just take the navbar off you can violate some of the Blogger terms of use. Ooops… But guess what? Try moving your mouse close to the top where the bar is supposed to appear? What happens? It drops down!!! No violation done, right? ;) The bar is still there but you can’t really see it! And you can still quickly access your blog dashboard and the other navbar links without having to open it in a different tab. Would you like to have a “disappearing navbar“ on your blog too? Here is the best and easiest way I found to accomplish that:
<!– 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 –>
→ GO to Patty Trends
I want her sewing room! Mine is kind of dark and hers is light and airy. Do you think she’ll swap with me?
Great tutorial too. I never liked that navbar either.
I want her sewing room too!!! :) I wish I had a sewing room period! :)
Patty – It’s not working for me. I’m doing exactly what you say but when I add the html into the gadget and save it, the bar doesn’t disappear. I go back to check html within box and some extra code is added. Help!
hmmm i tried it last night and it worked. but now i just tried it again and it didn’t. It is probably just blogger… maybe give it a min and restart your internet browser?
anyone else try it?
by the way, that reply came across as an email, just fyi
It’s not working for me either…bummer!
hmmm… blogger is defintely accepting the code {because the actual cod isn’t showing up in sidebar} but I don’t know why it isn’t working… :)
I will work on it! :)
sorry guys if the code is not working for you. maybe try what Kendra suggested… refresh your browser or maybe even access your blog through a different browser… this code worked for me and for some people… i use google chrome by the way.
thanks its working like charm for me!