How To Create A Sticky Navigation Menu In Blogger

Nowadays many popular websites and blogs are using fixed or sticky navigation menu. It is very beneficial for the visitors of your blog, as when they scroll down while viewing your posts they can easily choose different page or topic and don't have to scroll back to the top. As you may have noticed that I am also using Sticky Navigation Menu on this blog.


Well it is not very tough to Create A Sticky Navigation Menu, you just have to follow the below  steps. 

Sticky Navigation Menu

Step-wise Tutorial on How To Create A Sticky Navigation Menu In Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Layout

Step 3 : Click on Add a Gadget

Step 4 : Now a pop up window will open, scroll down and click on HTML/JavaScript

Step 5 : Now paste the below code in Content box and click on Save

<script>
// Sticky widget
// Tutorial
// Free to use or share
//<![CDATA[
bs_makeSticky("PageList1"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

I hope you will easily make the Navigation Menu sticky. If you have any trouble you can ask me any time. If you liked this post then please share with your friends.

Happy Blogging!!!