<header id="site-header" role="banner" aria-label="Site header">
    <div id="site-header-wrapper" class="margin-wrapper">
      <a href="{{ site.baseurl }}/" class="elixir-image">
        <img src="{{ site.baseurl }}/assets/ELIXIR_LU.png" title="ELIXIR LU logo" />
      </a>
      <div class="hamburger">
        <input type="checkbox" />

        <ul>
            <li><a {% if page.section == 'About' %} class="active" {% endif %} href="{{ site.baseurl }}/about-node">About</a></li>
            <li><a {% if page.section == 'Services' %} class="active" {% endif %} href="{{ site.baseurl }}/services">Services</a></li>
            <li><a {% if page.section == 'Training' %} class="active" {% endif %} href="{{ site.baseurl }}/training">Training</a></li>
            <li><a {% if page.section == 'Events' %} class="active" {% endif %} href="{{ site.baseurl }}/events">Events</a></li>
            <li><a {% if page.section == 'News' %} class="active" {% endif %} href="{{ site.baseurl }}/news">News</a></li>
            <li><a {% if page.section == 'Contact' %} class="active" {% endif-%} href="{{ site.baseurl }}/contact">Contact</a></li>
            <li><a {% if page.section == 'Search' %} class="active" {% endif-%} href="{{ site.baseurl }}/search">Search</a></li>
        </ul>
      </div>
    </div>
</header>