Create a Sticky navigation bar in Blogger

Change Any normal Navigation bar to a Sticky Navigation Bar with this guide.

What is the benefits of this?
Your website or blog visitors doesn't have to scroll back to the top to select different topic or category.

Tutorial 1:
This tutorial helps to make your navigation bar appear at the top of your blog on load and fixed to the top of the browser window while the user is scrolling.

NOTE:This tutorial is for those who doesn't have navigation bar below header.

1.First of all login to your blog and go into Template>Edit Template

2.You’ll need to wrap it in a div with the id navigationbar like s
(if your navigation bar has search box and social media icons the add their code also in it)

<div id="navigationbar">

... /Your Navigation bar html goes here/ ...

</div>

3. Go to Template > Edit HTML and search for ]]> </b:skin> and just above ]]> </b:skin> add the following code –

/* START thegeekystuff and hackersofhell FIXED NAV BAR */
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
/* END thegeekystuff and hackersofhell FIXED NAV BAR */

Tutorial 2:(recommended)

If your navigation bar is under your header and you want it to stick to the top of the window when user scroll past it then follow this tutorial is for you.

1. Go to Template > Customise > Advanced > Add CSS and add the following code. When you add CSS to the Template Designer on Blogger, it automatically gets placed before ]]></b:skin> in your template.

/* START thegeekystuff and Hackersofhell 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 thegeekystuff and Hackersofhell STICKY NAV BAR */

2.Now go into Template>Edit html and find the navigation bar code of your template.After finding,Paste <sticknav> before it and </sticknav> after the whole navigation bar html code.
(if your navigation bar has search box and social media icons the add their code also in it)

<sticknav> 

.../Your template navigation code goes here/....

</sticknav> 

4. The final step is to add a script to tell the bar to scroll. For this go to Layout > Add Gadget > HTML/Javascript Gadget and paste the following.

<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> 

5.Save it and see variation into your blog

       Sharing is Sexy! Share this post!

Blogger Solutions Blogger tutorial how to Templates Tutorials 01:42