<header>
  <div class="config-title">
  <h1><a href={{ config.base_url }}>{{ config.title }}</a></h1>
  </div>
  
    <div class="main">
        <div class="socials">
            {% for social in config.extra.socials %}
            <a href="{{ social.url }}" class="social">
              <img alt={{ social.name }} src="/social_icons/{{ social.icon }}.svg" rel="me">
            </a>
              {% if not loop.last %}
              |
              {% endif %}
            {% endfor %}
        </div>


    </div>
    <div class="nav-header">
        {% for menu in config.extra.menu %}
        <a href={{ menu.url }}>{{ menu.name }}</a>
        {% if not loop.last %}
        |
        {% endif %}
        {% endfor %}

    </div>
</header>