Secondary header for Deals tab

_deals.scss

$deals-header-height: 48px;
.deals-view-page {
  padding-top: $nav-height + $deals-header-height;
}

// Page Header
.deals-header {
  @include transition(transform 150ms ease);
  width: 100%;
  height: $deals-header-height;
  padding: 0 8px;
  background-color: color(pattern-blue);
  vertical-align: middle;
  position: fixed;
  top: $nav-height;
  left: 0;
  z-index: $nav-z-index;
}

// Shrink nav to just the deals nav on scroll
// (this also adjusts the main nav to hide it - see _nav.scss)
.shrink-nav .deals-header {
  @include transform(translateY(#{$nav-height * -1}));
  @include shadow-light(1);
}

deals-view.html

<!-- Add after .deals-view-page -->
<div class="deals-header" layout="row" layout-align="start end">
  Header Content
</div>