Фиксированная шапка и скрытая шторка.

Исходный код

   <!-- Всегда показывать шапку, даже на маленьких экранах. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Заголовок -->
            <span class="mdl-layout-title">Основной заголовок</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Навигация в заголовке -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Домой</a>
               <a class="mdl-navigation__link" href="" style="color:gray">О нас</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">Заголовок шторки</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Первая ссылка в шторке</a>
            <a class="mdl-navigation__link" href="">Вторая ссылка в шторке</a>
             <a class="mdl-navigation__link" href="">Третья ссылка в шторке</a>
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">
          <p>Фиксированная шапка и скрытая шторка.</p>
             
          </div>
      </main>
   </div>