HOW TO MAKE A STICKY OR FLOATING NAVIGATION MENU BAR IN BLOGGER

Your site looks premium when it has a floating navigation bar. Now a day almost every site you see has floating or sticky navigation bar.

This tip is usually helpful for the sticky navigation bar. When navigation bar is generally place under the header and when a user scrolls down the site , the navigation menu bar will jump to the top of the site and remains there until user goes back to the top of the site.

Step 1

Go to Blogger >> Theme >> Edit HTML

Step 2

First you need to create basic navigation bar. It is supposed that your site has already a navigation bar. You just need to wrap it with <div id="navigationbar"> . Then it will become a complete navigation bar ready for the next step. See the below script and improvise with your current navigation bar to make a Navigation Code.

/*Creating Navigation Code */

<div id="navigationbar">

<ul id='cssnav'>

<li><a title="home" href="LINK">Home</a></li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

<li><a title="TITLE" href="LINK">TOPIC</a></li>

<li><a title="TITLE" href="LINK">TOPIC</a></li>

</ul>

</div>  

/*Creating Navigation Code */

Step 3

Paste <sticknav> before and </sticknav> after it.

<sticknav>

<div id="navigationbar">

<ul id='cssnav'>

<li><a title="home" href="LINK">Home</a></li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>

<li><a title="TITLE" href="LINK">TOPIC</a></li>

<li><a title="TITLE" href="LINK">TOPIC</a></li>

</ul>

</div>  

 </sticknav>

Step 4

Press Control+F and search for ]]></b:skin>]]> and paste below code before it.

/* This is for sticknav(Start) */

sticknav {

background: #ffffff; /*Change colour as per your theme*/

height: 30px;

width: 100%;

margin-right: auto;

margin-left: auto;

left: 0px;

right: 0px;

position: relative;

z-index: 9999;

}

.fixed { position:fixed;}

/* This is for sticknav(End) */

Step 5

Now the last step is to add JavaScript to set the behaviors of your navigation bar. It can be done in two ways. 

First way : Go to Layout >> Add Gadget >> HTML/Javascript Gadget and paste the below code
Second way : Simply paste the below code before </body> in HTML

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

I hope it will resolve your problem because it worked for me and if you have any doubt or issue you can comment below  , Thanks :-)