Skip to main content

Scrolling Navigation Bar

Add both of these to the Advanced Theme Editor

NOTE: You must be signed out in order for it to show/ work. 

Styles: Add both to CSS 

//Locked Nav Bar
#page-navigation {
    width: 100%;
    z-index: 1000;
    transition: top 0.3s;
}
//Locked Nav Bar
#page-navigation.fixed {
    position: fixed;
    top: 0;
}

Script: Add to Advanced Theme Scripts 

//Locked Nav Bar
document.addEventListener("DOMContentLoaded", function() {
    var navbar = document.getElementById("page-navigation");
    var sticky = navbar.offsetTop;
    var offset = -30; // Adjust this value as needed to make the transition more fluid

    // Create a placeholder element
    var placeholder = document.createElement('div');
    placeholder.style.width = '100%';
    placeholder.style.height = navbar.offsetHeight + 'px';
    placeholder.style.display = 'none';
    navbar.parentNode.insertBefore(placeholder, navbar);

    window.onscroll = function() {
        if (window.pageYOffset >= (sticky - offset)) {
            navbar.classList.add("fixed");
            placeholder.style.display = 'block';
        } else {
            navbar.classList.remove("fixed");
            placeholder.style.display = 'none';
        }
    };
});

Simplified advanced css izzy made not knowing we could do this already 

#page-navigation{ 
  background: #037cb5;
   position: sticky;
    top: 0;
    z-index: 1000;

}

 

(you can include this where you have the nav bar colors / box shadows / )