<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Brandon Himpfen</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Sidebar Menu</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>

body {
  background-color: #0077c8;
}
header.custom-header {
  background: #111;
}
.mdl-layout__header-row span.mdl-layout-title {
  color: #0077c8;
  text-transform: uppercase;
}
.custom-header .material-icons {
  color: #fff;
}
.custom-header a.mdl-navigation__link {
  color: #eee;
  font-weight: 700;
  font-size: 14px;
}
.custom-header a.mdl-navigation__link:hover {
  color: #fff;
}
.mdl-layout__drawer span.mdl-layout-title {
  background: #111;
  color: #0077c8;
}
.mdl-layout__drawer a.mdl-navigation__link {
  color: #eee;
  font-weight: 700;
  font-size: 14px;
}
.mdl-layout__drawer a.mdl-navigation__link:hover {
  color: #000;
}