masthead.html

{% capture logo_path %}{{ site.logo }}{% endcapture %}

<div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
        <nav id="site-nav" class="greedy-nav">
                {% unless logo_path == empty %}
                  <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>
                {% endunless %}
                <a class="site-title" href="{{ '/' | relative_url }}">
                  {{ site.masthead_title | default: site.title }}
                  {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
                </a>
                <ul class="visible-links">
                    {%- for link in site.data.navigation.main -%}
                        {% assign class = nil %}
                        {% if page.url contains link.url %}
                            {% assign class = 'active' %}
                        {% endif %}
                        {% if link.sublinks %}
                            <li class="dropdown {{ class }}">
                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ link.title }}    <i class="fa fa-caret-down fa-sm" aria-hidden="true"></i><span class="caret"></span></a>
                                <ul class="dropdown-content">
                                    {% for sublink in link.sublinks %}
                                        <li>
                                            <a href="{{ site.baseurl }}{{ sublink.url }}">    {{ sublink.title }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% else %}
                            <li class="masthead__menu-item">
                                <a href="{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
        {% if site.search == true %}
        <button class="search__toggle" type="button">
          <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
          <svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
            <path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
          </svg>
        </button>
        {% endif %}
        <button class="greedy-nav__toggle hidden" type="button">
          <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
          <div class="navicon"></div>
        </button>
        <ul class="hidden-links hidden"></ul>
      </nav>
    </div>
  </div>
</div>