<header class="main-header">
  <div class="wrapper">
    <div class="header-flex">
      <div class="menu-icon-container">
        <span class="menu-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>
      </div>
      <nav class="main-nav">
        <span class="menu-icon-close"><i class="fa fa-times" aria-hidden="true"></i></span>
        <ul>
          <li><a href="{{site.baseurl}}/about">About</a></li>
          <li><a href="{{site.baseurl}}/collections">Collections</a></li>
          <li><a href="{{site.baseurl}}/tags">Tags</a></li>
          <li><a href="javascript:invert()">Invert colors</a></li>
        </ul>
      </nav>
      <p class="logo"><a href="{{site.baseurl}}/">{{ site.author }}</a></p>
      <div class="search-icon-container">
        <span class="search-icon"><a><i class="fa fa-search" aria-hidden="true"></i></a></span>
      </div>
    </div>
  </div>
</header> <!-- End Header -->
