_navigation.haml

%nav.primary-navigation
  .brand-banner
    .left
      %p Marketing message here
    .right
      %p Questions? 1-800-555-1234

  .main-navigation
    %h1 My Title
    %a.menu(href="")
      %span Menu
    
    %ul.nav-links
      %li= link_to 'something', '#'
      %li= link_to 'something', '#'
      %li= link_to 'something', '#'

navigation.scss

$brand-banner-height: rem-calc(22px);

$primary-navigation-height-small: rem-calc(40px);
$primary-navigation-height-large: rem-calc(69px) + $brand-banner-height;

$main-navigation-height-small: rem-calc(40px);
$main-navigation-height-large: $primary-navigation-height-large - $brand-banner-height;

nav.primary-navigation {
  height: $primary-navigation-height-large;
  position: absolute;

  .brand-banner {
    height: $brand-banner-height;
  }

  .main-navigation {
    height: $main-navigation-height-large;
    position: relative;
  }

  body.scrolled & {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  @media #{$small-only} {
    height: $primary-navigation-height-small;

    > .brand-banner {
      display: none;
      height: 0;
    }

    .main-navigation {
      vertical-align: top;
      height: $main-navigation-height-small;
    }
  }
}

body {
  @include transition(padding-top .3s ease);
  padding-top: $primary-navigation-height-large;

  &.scrolled {
  padding-top: $primary-navigation-height-large - $brand-banner-height;

  nav.primary-navigation {
    height: $main-navigation-height-large - $brand-banner-height;
  }

  @media #{$small-only} {
    padding-top: $primary-navigation-height-small;
  }
}