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.

*Important Note: This fixed header method does not work if you have items in both the top and bottom header.

A Simple Fixed Header

Custom CSS:

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

@media screen and (min-width: 640px) {
  .Index-page:first-child, .Main--page, .Intro, .Main {
    padding-top: 81px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}

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');
  }
  else{
    $('.Header').removeClass('scrollNav');
  }
});
</script>

Custom CSS:

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

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

.Header.scrollNav {
  background: #fff!important;
  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;
    }
  }
}

@media screen and (min-width: 640px) {
  .Index section:first-child, .Main--page, .Intro, .Main {
    padding-top: 81px;
  }

  .Intro + .Main {
    padding-top: 0px;
  }
}

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