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

Шторка открыта на больших экранах.

Добавляется класс для отображения шапки mdl-layout--fixed-header к предыдущему примеру

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
             

Содержимое шапки находится в 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>