WANASEOBY: How to add Sticky Navigation Bar to your Blog

Straight to the point, click this link to see the live preview of the navigation bar -> Click here.

For classic template, paste the code below under </style>

For blogger template designer, paste the code in add HTML/Javascript area.

<style type="text/css">
.floating-navi{
width:100%;
background:#dddddd;
position:fixed;
top:0px;
left:0px;
height:20px;
}

.floating-navi-box{width:100%;
position:fixed;
text-align:center;
top:20px;
left:0px;
height:20px;
}

a.floating-navi-menu{
background:#f3e1e1;
text-decoration:none;
color:#777777;border-top:none;
padding:5px;
font:11px arial;
margin-left:5px;
margin-right:5px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
display:inline-block;-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:60px;
}

a.floating-navi-menu:hover{
background:#dcdcf2;
color:#000;
}
</style>

<div class="floating-navi-box">
<a class="floating-navi-menu" href="LINK">ABOUT</a>
<a class="floating-navi-menu" href="LINK">TUTO</a>
<a class="floating-navi-menu" href="LINK">LINKIES</a>
<a class="floating-navi-menu" href="LINK">FREEBIES</a>
<a class="floating-navi-menu" href="http://www.blogger.com/follow-blog.g?blogID=YOURBLOGID">FOLLOW</a></div>
<div class="floating-navi">
</div>

WANASEOBY

5/31/2013

How to add Sticky Navigation Bar to your Blog - Style 3

5/31/2013