Sticky Header

By default the theme has a sticky header on the home page. You can change this to be sticky everywhere in /js/sticky-header. To do so, just remove this check:

if($('body').hasClass('home')) {

To add the sticky part to another element, in /js/sticky-header.js, change .site-header to the element you want. Then in /sass-partials/_site-header.sass, make the appropriate changes.

To change the styling, all the sticky styles are in /sass-partials/_site-header.sass. Here is the pertinent code:

/* ## Sticky Header
 *---------------------------------------------*/
.site-header
  transition: all 1s ease-in-out
  z-index: 0
  top: -$headerHeight
  left: 0
  width: 100%
  &.sticky
    position: fixed
    z-index: 9999999
    top: 0
    left: 0
    width: 100%

The header height is set in style.sass.

This code on non-sticky is what makes the animation work when the sticky class is added:

  transition: all 1s ease-in-out
  z-index: 0
  top: -$headerHeight

The body also has an offset for smooth scrolling. If you change the height or the header, you'll also want to change this:

body.sticky
  margin-top: $headerHeight