header.liquid

<section data-section-id="{{ section.id }}" id="header" data-section-type="header" class="header-fixed global-restrict">

  {% comment %} Header Announcement {% endcomment %}
  {% include 'announcement-bar' %}

  {% comment %} Search bar, reveals on click of search icon {% endcomment %}
  {% include 'search-bar' %}

  {% comment %} Logo and link home {% endcomment %}
  <a class="logo" href="/">
    <img src="{{ 'logo.svg' | asset_url }}" />
  </a>

  {% comment %} Desktop Navigation {% endcomment %}
  {% include 'navigation' %}
  
  {% comment %} Utility Links (top right of header) {% endcomment %}
  <div class="utility-links">
    <span class="hide-on-tablet search-toggle" onclick="$('.search-bar').addClass('show'); $('.search-bar input[name=\'q\']').focus();">
      <img src="{{ 'icon-header-search.svg' | asset_url }}" />
    </span>

    {% comment %} Customer Account Link (contextual) {% endcomment %}
    {% if shop.customer_accounts_enabled %}
      <span class="hide-on-tablet header-item">
        {% if customer %}
          <a href="/account">
        {% else %}
          <a href="/account/login">
        {% endif %}
          <img src="{{ 'icon-header-user.svg' | asset_url }}" />
        </a>
      </span>
    {% endif %}

    {% comment %} Mobile Menu grabber with bars that turn into an X {% endcomment %}
    <span class="show-on-tablet mobile-menu-toggle header-item">
      <i></i>
      <i></i>
    </span>

    {% comment %} Sidebar Cart link {% endcomment %}
    <span class="cart-icon" id="quick-cart-trigger">
      <img src="{{ 'icon-header-cart.svg' | asset_url }}" />

      {% comment %} Cart badge, only show if there are items in the cart {% endcomment %}
      <i class="hide cart-count-badge"></i>
    </span>


  </div>

</section>

{% comment %} Mobile Menu, shows on click of 'mobile-menu-toggle' {% endcomment %}
<nav class="mobile-menu" role="navigation">
  {% include 'nav-items', mobile: true %}
</nav>

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "header",
        "content": "Header"
      },
      {
        "type": "link_list",
        "id": "menu",
        "label": "Menu",
        "default": "main-menu"
      }
    ]
  }
{% endschema %}