Squarespace Tutorial: Fixed Header in Brine Template

In this short tutorial series, I show you how to create a fixed header in the Brine template of Squarespace. Below you will find the video tutorials as well as the code used.

A Simple Fixed Header

Custom CSS:

.Header {
     position: fixed!important;
     z-index: 1000;
     width: 100%;
}

.Index-page:first-child, .Main--page, .Intro {
     padding-top: 81px;
}

Advanced Fixed Header (Banner Overlay)

Code Injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 50){
    $('.Header').addClass('scrollNav');
    $('.Mobile-bar--top').addClass('scrollNav');

  }
  else{
    $('.Header').removeClass('scrollNav');
    $('.Mobile-bar--top').removeClass('scrollNav');
  }
})
</script>

Custom CSS:

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
  transition: all .2s ease;
}

.Header-inner {
  padding-top: 50px;
  transition: all .2s ease;
}

.Header.scrollNav {
  background: #fff;
  padding-bottom: 10px;

  .Header-inner {
    padding-top: 10px!important;
  }

  .Header-branding {
    color: #000;
  }

  .Header-nav a {
    color: #000!important;

    &:hover {
      color: rgba(0,0,0,.6)!important;
    }
  }
}

.Index-page:first-child, .Main--page, .Intro {
  padding-top: 81px;
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris