Navigation

{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {%- endif -%} {%- style -%} .section-header { margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-header { margin-bottom: {{ section.settings.margin_bottom }}px; } } {%- endstyle -%} <{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- if section.settings.menu != blank -%} {%- endif -%} {%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%}
{%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign image_size_2x = section.settings.logo_width | times: 2 | at_most: 5760 -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%} {%- if section.settings.menu != blank -%} {%- if section.settings.menu_type_desktop == 'dropdown' -%} {%- else -%} {%- endif -%} {%- endif -%}
{%- if shop.customer_accounts_enabled -%} {%- endif -%} {%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}
{%- if cart.item_count < 100 -%} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}
{% comment %} START OF ADDED CODE TO ADD SOCIAL ICONS TO HEADER {% endcomment %} {% comment %} END OF ADDED CODE TO ADD SOCIAL ICONS TO HEADER {% endcomment %}
{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}> {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%} {% javascript %} class StickyHeader extends HTMLElement { constructor() { super(); } connectedCallback() { this.header = document.getElementById('shopify-section-header'); this.headerBounds = {}; this.currentScrollTop = 0; this.preventReveal = false; this.predictiveSearch = this.querySelector('predictive-search'); this.onScrollHandler = this.onScroll.bind(this); this.hideHeaderOnScrollUp = () => this.preventReveal = true; this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); window.addEventListener('scroll', this.onScrollHandler, false); this.createObserver(); } disconnectedCallback() { this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); window.removeEventListener('scroll', this.onScrollHandler); } createObserver() { let observer = new IntersectionObserver((entries, observer) => { this.headerBounds = entries[0].intersectionRect; observer.disconnect(); }); observer.observe(this.header); } onScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (this.predictiveSearch && this.predictiveSearch.isOpen) return; if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) { if (this.preventHide) return; requestAnimationFrame(this.hide.bind(this)); } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { if (!this.preventReveal) { requestAnimationFrame(this.reveal.bind(this)); } else { window.clearTimeout(this.isScrolling); this.isScrolling = setTimeout(() => { this.preventReveal = false; }, 66); requestAnimationFrame(this.hide.bind(this)); } } else if (scrollTop <= this.headerBounds.top) { requestAnimationFrame(this.reset.bind(this)); } this.currentScrollTop = scrollTop; } hide() { this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); this.closeMenuDisclosure(); this.closeSearchModal(); } reveal() { this.header.classList.add('shopify-section-header-sticky', 'animate'); this.header.classList.remove('shopify-section-header-hidden'); } reset() { this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate'); } closeMenuDisclosure() { this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); this.disclosures.forEach(disclosure => disclosure.close()); } closeSearchModal() { this.searchModal = this.searchModal || this.header.querySelector('details-modal'); this.searchModal.close(false); } } customElements.define('sticky-header', StickyHeader); {% endjavascript %} {%- if request.page_type == 'index' -%} {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %} {%- endif -%} {% schema %} { "name": "t:sections.header.name", "class": "section-header", "settings": [ { "type": "select", "id": "color_scheme", "options": [ { "value": "accent-1", "label": "t:sections.all.colors.accent_1.label" }, { "value": "accent-2", "label": "t:sections.all.colors.accent_2.label" }, { "value": "background-1", "label": "t:sections.all.colors.background_1.label" }, { "value": "background-2", "label": "t:sections.all.colors.background_2.label" }, { "value": "inverse", "label": "t:sections.all.colors.inverse.label" } ], "default": "background-1", "label": "t:sections.all.colors.label" }, { "type": "image_picker", "id": "logo", "label": "t:sections.header.settings.logo.label" }, { "type": "range", "id": "logo_width", "min": 50, "max": 250, "step": 10, "default": 100, "unit": "t:sections.header.settings.logo_width.unit", "label": "t:sections.header.settings.logo_width.label" }, { "type": "select", "id": "logo_position", "options": [ { "value": "middle-left", "label": "t:sections.header.settings.logo_position.options__1.label" }, { "value": "top-left", "label": "t:sections.header.settings.logo_position.options__2.label" }, { "value": "top-center", "label": "t:sections.header.settings.logo_position.options__3.label" } ], "default": "middle-left", "label": "t:sections.header.settings.logo_position.label", "info": "t:sections.header.settings.logo_position.info" }, { "type": "link_list", "id": "menu", "default": "main-menu", "label": "t:sections.header.settings.menu.label" }, { "type": "select", "id": "menu_type_desktop", "options": [ { "value": "dropdown", "label": "t:sections.header.settings.menu_type_desktop.options__1.label" }, { "value": "mega", "label": "t:sections.header.settings.menu_type_desktop.options__2.label" } ], "default": "dropdown", "label": "t:sections.header.settings.menu_type_desktop.label", "info": "t:sections.header.settings.menu_type_desktop.info" }, { "type": "checkbox", "id": "show_line_separator", "default": true, "label": "t:sections.header.settings.show_line_separator.label" }, { "type": "checkbox", "id": "enable_sticky_header", "default": true, "label": "t:sections.header.settings.enable_sticky_header.label", "info": "t:sections.header.settings.enable_sticky_header.info" }, { "type": "header", "content": "t:sections.all.spacing" }, { "type": "range", "id": "margin_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.header.settings.margin_bottom.label", "default": 0 } ] } {% endschema %}