Elektron sticky header 2

...

Dashboard

  <li>
    <a href="#" class="has-arrow">
      <span class="has-icon">
        <i class="fa fa-pagelines"></i>
      </span>
      <span class="nav-title">Blank Pages</span>
    </a>
    <ul>
      <li>
        <a href="no-footers.html">No Footers</a>
      </li>
      <li>
        <a href="no-headers.html">No Headers</a>
      </li>
      <li>
        <a href="no-headers-footers.html">No Headers & Footers</a>
      </li>
      <li>
        <a href="app-is-fixed.html">App Fixed</a>
      </li>
      <li>
        <a href="main-is-fixed.html">Main Fixed</a>
      </li>
      <li>
        <a href="sticky-header.html">Sticky Header</a>
      </li>
      <li>
        <a href="sticky-header-2.html">Sticky Header 2</a>
      </li>
      <li>
        <a href="sticky-footer.html">Sticky Footer</a>
      </li>
    </ul>
  </li>

  <li>
  <a href="#" class="has-arrow">
    <span class="has-icon"><i class="fa fa-list"></i></span>
    <span class="nav-title">elk-side</span>
  </a>
  <ul>
    <li><a{{#is title "is-mini"}} class=active{{/is}} href="app-side-is-mini.html">is-mini</a></li>
    <li><a{{#is title "is-hoverable"}} class=active{{/is}} href="app-side-is-hoverable.html">is-hoverable</a></li>
    <li>
      <a href="#" class="has-arrow">is-fixed</a>
      <ul>
        <li><a{{#is title "app-side fixed"}} class=active{{/is}} href="app-side-is-fixed.html">Default</a></li>
        <li><a{{#is title "elk-side hoverable"}} class=active{{/is}} href="app-side-is-fixed-is-hoverable.html">Hoverable</a></li>
      </ul>
    </li>

    <li>
      <a href="#" class="has-arrow">is-sticky</a>
      <ul>
        <li><a{{#is title "is-sticky"}} class=active{{/is}} href="app-side-is-sticky.html">Default</a></li>
        <li><a{{#is title "is-sticky is-mini"}} class=active{{/is}} href="app-side-is-sticky-is-mini.html">mini</a></li>
        <li><a{{#is title "is-sticky is-hoverable"}} class=active{{/is}} href="app-side-is-sticky-is-hoverable.html">hoverable</a></li>
      </ul>
    </li>

  </ul>
</li>
</ul>

{{!—

<!-- BEGIN .side-content -->
<div class="side-content ">

  {{> elk-side-nav}}

</div>
<!-- END: .side-content -->

<!-- BEGIN .side-footer -->
<footer class="side-footer">
  SIDE FOOTER
</footer>
<!-- END .side-footer -->

--}}

<!-- BEGIN .main-heading -->
<header class="elk-main-header">
  MAIN HEADING
</header>
<!-- END: .main-heading -->

<!-- BEGIN .main-content -->
<div class="elk-main-content">
  <label class="elk-switch">
    <input name="dark" class="elk-switch-input" type="checkbox">
    <span class="elk-switch-indicator"></span>
  </label>
  <h4>Code</h4>
  <p>Supported browser :
    <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a>
  </p>
  <h5>HTML</h5>
  <p>
    <pre><code class="language-html">&lt;!-- BEGIN .elk-header --&gt;

<header class=“elk-header is-sticky” data-theme=dark> <a href=“#app-side” data-toggle=“onoffcanvas” class=“onoffcanvas-toggler” aria-expanded=false></a> <span>APP HEADER</span> </header> <!— END: .elk-header —>

lorem

</div>
<!-- END: .main-content -->

<!-- BEGIN .main-footer -->
<footer class="main-footer">
  main footer
</footer>
<!-- END: .main-footer -->