Creating a simple sticky or scrolling navigation menu for blogger is quite important for many bloggers. Today creating a sticky navigation menu for blogger is our tutorial and let's make this done. Hope this article would help many blogger and website designers to add this sticky navigation menu for blogger. Ok this is quite different process, but don't worry I would help you to make this done. Ok before getting into the tutorial have a look at live demo, link is below. If you have any problem with this sticky floating navigation widget for blogger then have a look at video tutorial at the end of article.



LIVE DEMO

1. Login into Blogger
2. Select your blog if you have many
3. Then migrate to TEMPLATE --> Click on "EDIT HTML"
4. Then find for </body>
5. Then copy the below code and paste above it / before it., then make your editing
6. Then click on save template .

ALSO READ :  7 TYPE OF NAVIGATION MENU WIDGET FOR BLOGGER WITH DROPDOWN EFFECTS

<script>
// Sticky Widget By wehelpalways.blogspot.in
//<![CDATA[
wha_makeSticky("WIDGET ID HERE"); // enter your widget ID here
function wha_makeSticky(elem) {
    var wha_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    wha_sticky.parentNode.insertBefore(scrollee, wha_sticky);
    var width = wha_sticky.offsetWidth;
    var iniClass = wha_sticky.className + ' wha_sticky';
    window.addEventListener('scroll', wha_sticking, false);
    function wha_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            wha_sticky.className = iniClass + ' wha_sticking';
            wha_sticky.style.width = width + "px";
        } else {
            wha_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

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

Now we have completed 60% of our work in adding a sticky navigation menu in blogger, let's complete the remaining work also. Now you need to visit our blog and find the navigation menu widget code. Note you should have already logged in into your account.




When you visit your blog then you find the widget, with settings icon, just right click on it and click copy link location. Then paste the code in a notepad and find the widget code and replace the highlighted widget code. You still worried about the widget code then have a look at sample shown below.

http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol

Then just copy the code after &widgetId= and replace the WIDGET ID HERE highlighted in the above code. If you still have a problem and worried about the code then. Have a look at sample in the below image highlighted is the WIDGET ID code.

ALSO READ :  HOW TO MAKE A BLOGGER STICKY ON SCROLLING




Are still worried and confused about this article. Then don't worry we have made an video to solve your doubt. Please watch the video shown below for better understanding if you have any confusion with this article creating a simple sticky navigation menu for blogger.

Video tutorial in creating a sticky navigation widget for blogger

ARTICLE APPLICABLE :

1. How to create a sticky navigation menu for blogger
2. How to add a scrolling effect to navigation menu in blogger
3. How to add simple sticky navigation menu for blogger
4. How to create a scrolling effect to navigation menu in blogger