Tutorial: Sticky Navigation

In this tutorial we will create an effect for the navigation where the header stays at the top of the page - even when the customer scrolls.

assets/shop.js.liquid

Theme Editor link:
assets/shop.js.liquid

Use the find feature in the Code Editor (Command-F on a Mac or Control-F in Windows) and search for

$(window).resize

Around line 533 (Version 2.x) or 444 (Version 1.x) select this old code:

$(window).resize(function() {
  pipeline.detectNav();
  pipeline.equalHeight();
  pipeline.fullHeight();
  pipeline.contentOverflow();
}).resize();
	

Replace with this new code:

$(window).resize(function() {
  pipeline.detectNav();
  pipeline.equalHeight();
  pipeline.fullHeight();
  pipeline.contentOverflow();
  var headerMargin = $('.header__wrapper').height();
  $(".main-content").css("margin-top", headerMargin);
}).resize();

If you look carefully, you'll notice we are just adding two lines of code. 

 var headerMargin = $('.header__wrapper').height();
  $(".main-content").css("margin-top", headerMargin);

style.scss.liquid

Add this code at the bottom of assets/style.scss.liquid

.header__wrapper{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.page-margin{
  margin-top: 0;
  padding-top: 60px;
}
.site-header .nav--mobile{
  max-height: 95vh;
  overflow: auto;
}

Still need help? Contact Us Contact Us