Tutorial: Sticky Navigation

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

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Add code to your theme's Javascript file

Use this link to learn which Javascript file to open for your theme version:

Which Javascript file to open

Once you've opened the correct file, use the find feature in the Code Editor (Command-F on a Mac or Control-F in Windows) and search for

$(window).resize

Find box (1), search result (2)

Find the resize function with a listing of function calls:

Reference:
Pipeline 4, around line 1252
Pipeline 3, around line number 590
Pipeline 2, around line number 533

2

Add two lines of code

Add these two lines before before the end of the section:

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

Example:

Be sure it's before the line that has:

}).resize();

3

Add style code to your CSS file

Next we'll add some style code to a different file. I'll start with the code options first and follow with which file to add the code to. 

Important: Don't add this code to the same file as the previous steps.

CSS style code to add:

/* -- code for sticky navigation all pages -- */
.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;
}
/* -- end -- */


Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us