TUTORIAL | How to create a sticky Navigation Bar on Blogger ~ Andercorp Tech

Having a sticky navigation bar on your website or blog makes it easy for your visitors to access other areas of your site, cos the menu is always presented to them.
Now in this tutorial, i will teach you how to make your navigation bar stick or float on your browser window when you scroll pass it. It is Simpler than what you think.

Note: This tutorial is for navigation bars that are under the header.
For navigation bar above the header and more, visit Xomisse.com

Lets begin already

Step 1
Go to Templates=>Edit HTML then click anywhere on the HTML area and press ctrl+f and search for ]]></b:skin> in your template, then copy and paste the code bellow, change the colored code to suit your blog.

/* START ANDERCORP STICKY NAV BAR */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* END ANDERCORP STICKY NAV BAR */

Step 2
You will need to set up your navigation, skip this step to step 3 if you have done so, if not, there is a tutorial on how to create and style a basic navigation bar

Step 3
Go to your template and find your Navigation menu code and type or paste <sticknav> at the beginning of the code and </sticknav> at the end of the code.

You should have something like this

Step 4

The final step is to tell the Nav bar to stick, to do this, you have to go to Layout=> Add Gadget=> HTML/Javascript and paste the bellow code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    
var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Step 5
The script will presume that your header is called header, (see pink line) if the navigation is jumping, replace

var aboveHeight = $('header').outerHeight();

With the following code, adjust your header's height value

var aboveHeight = 300;

-Reload you website to see the change.
-Don't understand or you are lost ?
then the comment section will be your friend
-Have any suggestions ?
Contact me