Step 1. find your navigation's div id

Right click on your navigation and scroll down to and select "inspect element". A window will appear showing you the ID for your navigation menu's div.

This tutorial's navigation ID is "nav-wrap".

---

Step 2. add javascript and css code to your site's header and footer

Go to "Settings" at the top of the page and the click on "SEO" on the left. Paste the javascript code in the "Footer Code" and the css code in the "Header Code". After you paste each code in its designated area, it is an absolute imperative that you replace the orange text below with your navigation's div ID which you obtained in Step 1.

/* Javascript Code */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script >
$(document).ready(function() {
    var s = $("#nav-wrap");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
</script>

/* Css Code */
<style>
.stick {
position:fixed;
top:0px;
z-index:999;
}
</style>

Click save.

---

You're done! 
Publish your site to see your navigation stick to the top of the page when you scroll by it.

---

Tips & additional information

If you want your navigation menu to stick to the top after someone scrolls by it for just an individual page and not the entire site, you'll need to perform Step 2. a little differently.

Go to "Pages" at the top and then select, on the left, the individual pages which you'd like to apply this tutorial to. Then simply add the javascript code to the "Footer Code" and the css code to the "Header Code" for each page you want this tutorial applied to.

---

comments powered by Disqus