How to make Blogger navigation bar (menu bar) sticky which will be hidden when scroll down and appear on scroll up.

Share This:

Share Tweet Pin

There are a lots of websites or blog where you can see their navigation bar starts floating on top. Some site make it fix forever and some site make it appear after you scroll down the page, this technique allow you to keep showing the categories or other services that hide after visitor scroll down.

After following the steps of this post, your current Blogger navigation bar or menu bar become sticky which will be hidden while scrolling down and appear on scroll up.

Useful tutorials for you :
⏩ How to place Adsense Ad below Post Title and within or in-middle of the Blogger post
⏩ How to make any widget Sticky in Blogger

Customization : Don't forget to Replace the Widget ID (all red text of the code) with your Menu ID. Check this How to Know The Widget ID.

So, just follow these steps :

• Step 1 ⏩ Sign-in to your Blogger Account then Go to Layout → Add a Gadget → HTML / Java Script and paste the following code (It is recommended to ad this Gadget at the bottom area of your layout) :-

<script>
//<![CDATA[
bs_makeSticky("header-navigation"); //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:#032f37 !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>

• Step 2 ⏩  The above code will make your navigation menu bar sticky. Now below the above code Paste the following code for Scrolling effect.

<script>
//<![CDATA[
$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// downscroll code
$("#header-navigation").css({top:'-50px'})
.hover(function(){$("#header").css({top: '0px'})})
} else {
// upscroll code
$("#header-navigation").css({top:'0px'});
}
lastScrollTop = st;
});});
//]]>
</script>

• Step 3 ⏩ Now click on Save button and then Save Arrangement of your Layout.

Customization : Don't forget to Replace the Widget ID (all red text of above code) with your Menu ID.

And it has been done! Visit your site and see the changes 😊

Tips: # Whenever you edit the Blogger template's HTML, don’t forget to keep a Backup your existing blogger template, so that if something goes wrong, you can Restore the template.

If you found this post useful, please share it because Sharing is Caring 😊.