header.liquid

{% comment %} Settings Slide Out Navigation {% endcomment %}
{% assign menuPrimary = section.settings.menu_1_list %}
{% assign menuSecondary = section.settings.menu_2_list %}
{% if section.settings.show_announcement %}
{% include 'announcement-bar' %}
{% endif %}
<style>
.main-logo .logo {max-width: {{ section.settings.logo_max_width | append: 'px' }}; }
</style>

<header class="site-header is-absolute {% if section.settings.show_announcement %}has-announcement-bar{% endif %}" data-section-type="header" id="header">
    <div class="container">
        <div class="row row-lg">
            <div class="header-fix-cont">
                <div class="header-fix-cont-inner">
                    <a href="#menu" class="js-menuToggle menuToggle nav-item-fixed nav-item" data-target="nav">
                        <div id="hamburger-menu" class="icon-menu">
                            <img alt="icon-menu-open" src='{{"icon_fallback_menu.png" | asset_url }}' class="ie8-hidden icon-menu-open">
                            <img alt="icon-menu-close" src='{{"icon_fallback_close.png" | asset_url }}' class="ie8-hidden icon-menu-close">
                            <div class="diamond-bar"></div>
                            <div id="hamburger-bar" class="icon-bar"></div>
                        </div>
                    </a>

                    <a id="cartTotal" href="/cart" aria-label="{{ 'cart.labels.items_added' | t }}" class="js-cartToggle cartToggle nav-item-fixed nav-item diamond-outline">
                      <svg width="34px" height="48px" viewBox="0 0 40 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Group">
                                    <polygon id="Rectangle-2" fill="#FFFFFF" points="4 17 36 17 38 46 1 46"></polygon>
                                    <path d="M39.6,46.7 L36,16.7 C35.9,16.2 35.5,15.8 35,15.8 L29.9,15.8 L29.9,9.9 C29.9,4.4 25.4,0 20,0 C14.6,0 10.1,4.4 10.1,9.9 L10.1,15.8 L5,15.8 C4.5,15.8 4.1,16.2 4,16.7 L0.4,46.9 C0.4,47.2 0.5,47.5 0.6,47.7 C0.8,47.9 1.1,48 1.4,48 L38.6,48 C38.6,48 38.6,48 38.6,48 C39.2,48 39.6,47.6 39.6,47 C39.6,46.9 39.6,46.8 39.6,46.7 Z M12.1,9.9 C12.1,5.5 15.6,2 20,2 C24.4,2 27.9,5.5 27.9,9.9 L27.9,15.8 L12.1,15.8 L12.1,9.9 Z M2.5,46 L5.9,17.8 L10.1,17.8 L10.1,20 C10.1,20.6 10.5,21 11.1,21 C11.7,21 12.1,20.6 12.1,20 L12.1,17.8 L27.9,17.8 L27.9,20 C27.9,20.6 28.3,21 28.9,21 C29.5,21 29.9,20.6 29.9,20 L29.9,17.8 L34.1,17.8 L37.5,46 L2.5,46 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                                </g>
                            </g>
                        </svg>
                        <div id="CartToggleItemCount" class="cartToggle-items">{{cart.item_count}}</div>
                    </a> 
                </div>
            </div>
            {%if template == 'index' %}
            {% if section.settings.logo %}
                <a tabindex= "-1" href="/" class="visible-nav-link nav-item main-logo">
                    <img  src="{{ section.settings.logo | img_url: 'original' }}" title="{{ shop.name }}" class="logo"/>
                </a>
            {% else %}
              {% if section.settings.show_site_name %}
                  <h1 class="nav-item main-logo main-logo__text" itemscope itemtype="http://schema.org/Organization">
                      <a id="shopName" href="/" itemprop="url">{{ shop.name | escape }}</a>
                  </h1>
                {% endif %}
            {% endif %}
            {% else %}
             {% if section.settings.logo_other != blank%}
                <a tabindex= "-1" href="/" class="visible-nav-link nav-item main-logo">
                    <img  src="{{ section.settings.logo_other | img_url: 'original' }}" title="{{ shop.name }}" class="logo"/>
                </a>
            {% else %}
                {% if section.settings.logo %}
                <a tabindex= "-1" href="/" class="visible-nav-link nav-item main-logo">
                    <img  src="{{ section.settings.logo | img_url: 'original' }}" title="{{ shop.name }}" class="logo"/>
                </a>
              {% else %}
              {% if section.settings.show_site_name %}
                <h1 class="nav-item main-logo main-logo__text" itemscope itemtype="http://schema.org/Organization">
                    <a id="shopName" href="/" itemprop="url">{{ shop.name | escape }}</a>
                </h1>
                {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
        </div>
    </div>
</header>

{% comment %} Site Navigation {% endcomment %}
<nav role="navigation" class="nav-container style-default">
  <div class="nav-inner">

    <div class="nav-mobile-close js-menuToggle">
      <i class="icon-close"></i>
    </div>
    <div class="nav-search">
      {% if section.settings.show_search %}
      <a id= "firstFocus" class="js-searchToggle searchToggle">
        <i class="icon-search"></i><i class="icon-close"></i><span class = "h4">{{ 'general.slide_out_navigation.search_label' | t }}</span>
      </a>
      <div class="nav-search-overlay">
        <form action="/search" method="get" class="search-form" role="search">
          <div class="inputGroup">
            <label for="search-field" class="accessible-label">{{ 'general.slide_out_navigation.search_label' | t }}</label>
            <input tabindex= "-1" class="nav-search-input" name="q" type="search" id="search-field" placeholder="{{ 'general.slide_out_navigation.search_placeholder' | t }}" value="{{ search.terms | escape }}" />
            <input type="hidden" name="type" value="product" />
            <button tabindex= "-1" type="submit" class="nav-search-submit icon-arrow-right"></button>
          </div>
        </form>
      </div>
      {% endif %}
    </div>
    <nav class="menu">
      {% comment %}
        Loop through the first link list.
      {% endcomment %}
      {% if menuPrimary != blank %}
        {% for link in linklists[menuPrimary].links %}
          {% assign has_sub_menu = false %}

          {% for sublink in link.links %}
              {% if sublink.levels > 0 %}
                {% assign has_sub_menu = true %}
              {% endif %}
          {% endfor %}

          <li class="menu-item{% if has_sub_menu == true %} has-submenu{% endif %}">
            <!-- LINKS -->
            <a {% if has_sub_menu %}aria-haspopup="true"{% endif %} {% if forloop.first and section.settings.show_search == false %}id="firstFocus"{% endif %} class = "visible-nav-link" tabindex= "-1" href="{{ link.url }}">{{ link.title | escape }}</a>

            {% if link.levels %}
              <ul class="submenu">
                <!-- BACK LINK -->
                <li class="submenu-back">
                  <a class="submenu-back--link first-back--link" data-sub-links="{{ link.levels }}" tabindex= "-1" href="#0">{{ link.title | escape }}</a>
                </li>
                <!-- SUBMENU LINKS -->
                {% for sublink in link.links %}
                  <li data-levels = "{{ sublink.levels }}" class="submenu-item {% if sublink.levels > 0 %}has-submenu{% endif %}">
                    <!-- SUBLINK TITLE -->
                    <a {% if has_sub_menu %}aria-haspopup="true"{% endif %} {% if forloop.last == true  %} data-last="true" {% endif %} class = "submenu-item--link" tabindex= "-1" href="{{ sublink.url }}">{{ sublink.title }}</a>
                  <!-- BEGIN SUB SUB LINK -->
                  <ul class="submenu">
                    <!-- BACK LINK -->
                    <li class="submenu-back">
                      <a class="submenu-back--link" data-sub-links="{{ link.levels }}" tabindex= "-1" href="#0">{{ sublink.title | escape }}</a>
                    </li>
                    <!-- SUBMENU LINKS -->
                    {% for subsublink in sublink.links %}
                      <li class="submenu-item">
                        <a {% if forloop.last == true  %} data-last="true" {% endif %} class = "submenu-item--link" tabindex= "-1" href="{{ subsublink.url }}">{{ subsublink.title }}</a>
                      </li>
                    {% endfor %}
                  </ul>
                   </li>
                  <!-- END SUBSUBLINK -->
                {% endfor %}

              </ul>
           {% endif %}

          </li>
        {% endfor %}
      {% endif %}

      {% comment %}
        Loop through the second link list.
      {% endcomment %}
      {% if menuSecondary != blank %}
        <span class="menu-divider menu-item"></span>

        {% for link in linklists[menuSecondary].links %}
          {% assign has_sub_menu = false %}

          {% for sublink in link.links %}
            {% if forloop.first %}
              {% if sublink.levels > 0 %}
                {% assign has_sub_menu = true %}
              {% endif %}
            {% endif %}
          {% endfor %}

          <li class="menu-item{% if has_sub_menu == true %} has-submenu{% endif %}">
            <!-- LINKS -->
            <a {% if has_sub_menu %}aria-haspopup="true"{% endif %} {% if forloop.first and section.settings.show_search == false %}id="firstFocus"{% endif %} class = "visible-nav-link" tabindex= "-1" href="{{ link.url }}">{{ link.title | escape }}</a>

            {% if link.levels %}
              <ul class="submenu">
                <!-- BACK LINK -->
                <li class="submenu-back">
                  <a class="submenu-back--link first-back--link" data-sub-links="{{ link.levels }}" tabindex= "-1" href="#0">{{ link.title | escape }}</a>
                </li>
                <!-- SUBMENU LINKS -->
                {% for sublink in link.links %}
                  <li data-levels = "{{ sublink.levels }}" class="submenu-item {% if sublink.levels > 0 %}has-submenu{% endif %}">
                    <!-- SUBLINK TITLE -->
                    <a {% if has_sub_menu %}aria-haspopup="true"{% endif %} {% if forloop.last == true  %} data-last="true" {% endif %} class = "submenu-item--link" tabindex= "-1" href="{{ sublink.url }}">{{ sublink.title }}</a>
                  <!-- BEGIN SUB SUB LINK -->
                  <ul class="submenu">
                    <!-- BACK LINK -->
                    <li class="submenu-back">
                      <a class="submenu-back--link" data-sub-links="{{ link.levels }}" tabindex= "-1" href="#0">{{ sublink.title | escape }}</a>
                    </li>
                    <!-- SUBMENU LINKS -->
                    {% for subsublink in sublink.links %}
                      <li class="submenu-item">
                        <a {% if forloop.last == true  %} data-last="true" {% endif %} class = "submenu-item--link" tabindex= "-1" href="{{ subsublink.url }}">{{ subsublink.title }}</a>
                      </li>
                    {% endfor %}
                  </ul>
                   </li>
                  <!-- END SUBSUBLINK -->
                {% endfor %}

              </ul>
           {% endif %}

          </li>          
        {% endfor %}
      {% endif %}

      {% if shop.customer_accounts_enabled %}
        <span class="menu-divider menu-item"></span>
        <li class="login-links h4">
          {% if customer %}
            <a class = "visible-nav-link" tabindex= "-1" href="/account">{{ 'customer.link.my_account' | t }}</a>
            /
            <a class = "visible-nav-link" tabindex= "-1" href="/account/logout">{{ 'customer.link.logout' | t }}</a>
          {% else %}
            <a class = "visible-nav-link" tabindex= "-1" href="/account/login">{{ 'customer.link.login' | t }}</a>
            /
            <a class = "visible-nav-link" tabindex= "-1" href="/account/register">{{ 'customer.link.sign_up' | t }}</a>
          {% endif %}
        </li>
      {% endif %}
    </nav>

    <div class="nav-footer">
        <div class="nav-social">
          {% if settings.twitter_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.twitter' | t }}" href="{{settings.twitter_url}}" target="_blank" class="visible-nav-link nav-social-link icon-twitter"></a>
          {% endif %}

          {% if settings.facebook_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.facebook' | t }}" href="{{settings.facebook_url}}" target="_blank" class="visible-nav-link nav-social-link icon-facebook"></a>
          {% endif %}

          {% if settings.instagram_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.instagram' | t }}" href="{{settings.instagram_url}}" target="_blank" class="visible-nav-link nav-social-link icon-instagram"></a>
          {% endif %}

          {% if settings.pinterest_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.pinterest' | t }}"  href="{{settings.pinterest_url}}" target="_blank" class="visible-nav-link nav-social-link icon-pinterest"></a>
          {% endif %}

          {% if settings.googleplus_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.googleplus' | t }}" href="{{settings.googleplus_url}}" target="_blank" class="visible-nav-link nav-social-link icon-googleplus"></a>
          {% endif %}

          {% if settings.youtube_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.youtube' | t }}" href="{{settings.youtube_url}}" target="_blank" class="visible-nav-link nav-social-link icon-youtube"></a>
          {% endif %}

          {% if settings.tumblr_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.tumblr' | t }}" href="{{settings.tumblr_url}}" target="_blank" class="visible-nav-link nav-social-link icon-tumblr"></a>
          {% endif %}

          {% if settings.rss_url != '' %}
            <a tabindex= "-1" aria-label = "{{ 'general.footer.rss' | t }}" href="{{settings.rss_url}}" target="_blank" class="visible-nav-link nav-social-link icon-rss"></a>
          {% endif %}
          <span tabindex="-1" class="last-focusable-element"></span>
        </div>
    </div>
  </div>
</nav>


{% unless template == 'cart' %}
  <div class="cartContainer">
    <div class="scroll">
      {% include 'site-cart' %}
    </div>
  </div>
{% endunless %}

{% comment %} Adds room to the top of the page under the fixed header. {% endcomment %}
{% unless template contains 'index' %}
      <div class="bodyWrap-spacer"></div>
{% endunless %}


{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Custom logo (Home page)",
      "info": "440px width recommended"
    },
    {
      "type": "image_picker",
      "id": "logo_other",
      "label": "Custom logo (All other pages)",
      "info": "440px width recommended"
    },
    {
      "type": "checkbox",
      "id": "show_site_name",
      "label": "Show site name",
      "default": true
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": "Custom logo width (in pixels)",
      "min": 50,
      "max": 500,
      "default": 100,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Menus"
    },
    {
      "type": "link_list",
      "id": "menu_1_list",
      "label": "Primary menu"
    },
    {
      "type": "link_list",
      "id": "menu_2_list",
      "label": "Secondary menu"
    },
    {
      "type": "checkbox",
      "id": "show_search",
      "label": "Show search box",
      "default":true
    },
    {
      "type":"header",
      "content":"Announcement bar"
    },
    {
      "type":"checkbox",
      "id":"show_announcement",
      "label":"Show announcement",
      "default":true
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default":"<p>Broadcast sales, promos, or other offerings here</p>"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ]
}
{% endschema %}