EZFY Debut theme sticky navbar. Replaces sections/header.liquid. Blog not published yet.

ezfy-debut-header.liquid

{% comment %} 

Sticky Navbar by ezfycode.com [START] 

{% endcomment %}

{% assign sticky-navbar-desktop = section.settings.sticky-navbar-desktop %}
{% assign sticky-navbar-mobile = section.settings.sticky-navbar-mobile %}
{% assign sticky-navbar-homepage = section.settings.sticky-navbar-homepage %}

{% assign sticky-announcement-desktop = section.settings.sticky-announcement-desktop %}
{% assign sticky-announcement-mobile = section.settings.sticky-announcement-mobile %}
{% assign sticky-announcement-homepage = section.settings.sticky-announcement-homepage %}

{% assign enable-box-shadow = section.settings.enable-box-shadow %}
{% assign font-size-navbar-desktop = section.settings.font-size-navbar-desktop %}
{% assign font-size-navbar-mobile = section.settings.font-size-navbar-mobile %}
{% assign font-size-announcement-desktop = section.settings.font-size-announcement-desktop %}
{% assign font-size-announcement-mobile = section.settings.font-size-announcement-mobile %}

{% assign bg-color-announcement = section.settings.bg-color-announcement %}
{% assign text-color-announcement = section.settings.text-color-announcement %}
{% assign bg-color-hover-announcement = section.settings.bg-color-hover-announcement %}
{% assign text-color-hover-announcement = section.settings.text-color-hover-announcement %}

{% assign announcement_bar_below = section.settings.announcement_bar_below %}

{% if template.name != "index" and sticky-navbar-homepage %} 
{% assign sticky-navbar-desktop = false %}
{% assign sticky-announcement-mobile = false %}
{% endif %}

{% if template.name != "index" and sticky-announcement-homepage %} 
{% assign sticky-announcement-desktop = false %}
{% assign sticky-announcement-mobile = false %}
{% endif %}


<div id="ezfyStickyNav" style="display:none;"
     
data-ezfy-bg-color-announcement="{{bg-color-announcement}}"
data-ezfy-text-color-announcement="{{text-color-announcement}}"  
data-ezfy-sticky-navbar-desktop="{{sticky-navbar-desktop}}"
data-ezfy-sticky-navbar-mobile="{{sticky-navbar-mobile}}"
data-ezfy-sticky-navbar-homepage="{{sticky-navbar-homepage}}"
data-ezfy-sticky-announcement-desktop="{{sticky-announcement-desktop}}"
data-ezfy-sticky-announcement-mobile="{{sticky-announcement-mobile}}"
data-ezfy-sticky-announcement-homepage="{{sticky-announcement-homepage}}"
data-ezfy-enable-box-shadow="{{enable-box-shadow}}"
     data-ezfy-announcement-bar-below="{{announcement_bar_below}}"
     ></div>

<style>

  
  .search-bar{
    position: fixed;
    top: 0;
    z-index: 9999;
  }

.cart-popup-wrapper{
    z-index: 99999999;
}

  .announcement-bar {
    z-index: 9999;
    background-color: {{bg-color-announcement}} !important;
  }
  
  .announcement-bar:hover{
      background-color: {{bg-color-hover-announcement}} !important;
        color: {{text-color-hover-announcement}} !important;
  }
  
  .announcement-bar *{
    color: {{text-color-announcement}} !important;
  }

  .announcement-bar__message{
      font-size: {{font-size-announcement-desktop}}px !important;
  }
  
  @media (max-width: 749px){
    .announcement-bar__message{
      font-size: {{font-size-announcement-mobile}}px !important;
  }
  }

  .mobile-nav__item *{
    font-size: {{font-size-navbar-mobile}}px !important;
  }

  @media (min-width: 750px){
    .site-header [class^='site-nav']{
      font-size: {{font-size-navbar-desktop}}px !important;   
    }
  }




  {% if section.settings.align_logo == 'center' %}
  nav#AccessibleNav {
    background-color: {{ settings.color_body_bg }};
    border: 1px solid transparent;
  }

  {% endif %}

  {% if enable-box-shadow == true %} 

  #shopify-section-header{
    box-shadow: -2px 8px 14px 0px rgba(0,0,0,0.08);
    -webkit-box-shadow: -2px 8px 14px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: -2px 8px 14px 0px rgba(0,0,0,0.08);
  }

  {% endif %}

  /* Navbar
  ================================================ */

  {% if sticky-navbar-homepage == true and template != 'index' %}

    
  #shopify-section-header{
    position: relative;
    padding-top: 0;
  }
  {% endif %}


  {% if sticky-navbar-desktop == true %}
  @media (min-width: 768px){
    #shopify-section-header{
      position: sticky;
      position: -webkit-sticky;
      top: 0px;
      padding-top: calc(0px + 0px); 
      
    z-index: 999;

    }
  }
  {% endif %}


  {% if sticky-navbar-mobile == true  %}
  @media (max-width: 767px){
    #shopify-section-header{
      position: sticky;
      position: -webkit-sticky;
      top: 0px;  
      padding-top: calc(0px + 0px); 
 z-index: 999;
    }
  }
  
  {% elsif sticky-navbar-mobile == false %}
  @media (max-width: 767px){
    #shopify-section-header{
      position: relative;
    }
  }
  {% endif %}


  /* Announcement Bar
  ================================================ */

  .announcement-bar{
    position: relative;
  }

  .js-drawer-open .announcement-bar{
    z-index: 999;
  }

  {% if sticky-announcement-desktop == true %}
  @media (min-width: 768px){
    .announcement-bar{
      position: sticky;
            position: -webkit-sticky;
      top: 0px;
      z-index: 9999;
    }
  }
  {% elsif sticky-announcement-desktop == false %}
  
    @media (min-width: 768px){
    .announcement-bar{
      position: relative;
    }
  }
  {% endif %}

  {% if sticky-announcement-mobile == true %}
  @media (max-width: 767px){
    .announcement-bar{
      position: sticky;
            position: -webkit-sticky;
      top: 0;
      z-index: 9999;
    }
  }
  {% elsif sticky-announcement-mobile == false %}
  @media (max-width: 767px){
    .announcement-bar{
      position: relative;
    }
  }
  {% endif %}
  
  
  {% if announcement_bar_below == true %}
	    .announcement-bar{
      display: none;
    }
  
  .site-header + .announcement-bar,
  #shopify-section-header + .announcement-bar{
  	display: block;
  }
  
  
  
    {% if sticky-navbar-desktop and sticky-announcement-desktop == false  %}
  
    .announcement-bar{
  z-index: 99;
  }
    
  {% endif %}
  
  
  
  
  {% endif %}
  
  
  .announcement-bar--below{
  	z-index: 10 !important;
  }


  /* Custom Styles 
  =================================== */

.site-header__search-toggle {
    display: block;
}
  
.search-bar__interior {
    height: 100%;
    display: flex;
    flex: 1
}

@media only screen and (min-width: 750px) {
    .search-bar__interior {
        padding-left:55px;
        padding-right: 55px;
        height: auto
    }
}

.search-form__container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 7px;
    padding-right: 10px;
    background-color: var(--color-bg)
}

.search-bar__form {
    flex: 1 1 100%;
    position: relative;
    max-width: 750px;
    border: 1px solid transparent
}

.search-bar__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center
}

.search-bar__submit {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    padding: 0 12px;
    height: 100%;
    vertical-align: middle;
    background-color: transparent;
    border: 0;
    margin: 0;
    color: var(--color-text-field-text)
}

.search-bar__submit .icon {
    position: relative;
    top: -1px;
    width: 1.2rem;
    height: auto
}

.search-bar__submit:focus,.search-bar__submit:hover {
    color: rgba(var(--color-text-field-text-rgb),.6)
}

.search-bar__input {
    padding-right: 45px;
    width: 100%;
    min-height: 44px;
    color: var(--color-text-field-text);
    background-color: var(--color-text-field);
    border: none;
    border: 1px solid var(--color-border-form)
}

.search-bar__close {
    padding: calc(10em / 16) .75em;
    margin-right: -10px
}

.search-bar__close .icon {
    width: 1rem;
    height: auto
}

.predictive-search-wrapper {
    transition-property: opacity,visibility;
    transition-duration: .1s;
    transition-timing-function: ease-in-out;
    z-index: 1000;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: -1px;
    border: 1px solid var(--color-border-form);
    background-color: var(--color-bg);
    overflow-y: auto;
    display: none
}

.search-bar .predictive-search-wrapper {
    position: fixed;
    width: 100%
}

@media only screen and (max-width: 749px) {
    .search-bar .predictive-search-wrapper {
        border:none
    }
}

@media only screen and (min-width: 750px) {
    .search-bar .predictive-search-wrapper {
        position:absolute;
        right: auto;
        left: auto;
        max-width: 748px
    }
}

@media only screen and (min-width: 750px) {
    .predictive-search-wrapper {
        max-height:80vh
    }
}

@media only screen and (max-width: 749px) {
    .predictive-search-wrapper--drawer {
        padding-top:14px;
        margin-top: 3px
    }
}

  .js-drawer-open .announcement-bar{
  z-index: -1;
  }
  
  @media (max-width: 767px){
      .js-drawer-open .announcement-bar{
    display: none;
  }
  
  }
  
</style>

<style>
/* Custom styles for customer */
  a + #SearchDrawer{
    display: none !important;
}
  

  .search-bar__input{
    border: 1px solid #cccccc;
}
</style>




{% comment %} Sticky Debut Header by ezfycode.com [END] {% endcomment %}

{% if section.settings.message %}
  <style>
    {% if section.settings.logo != blank %}
      .site-header__logo-image {
        max-width: {{ section.settings.logo_max_width | escape }}px;
      }
    {% endif %}

    {% if section.settings.align_logo == 'left' %}
      .site-header__logo-image {
        margin: 0;
      }
    {% endif %}
  </style>
{% endif %}

<div id="SearchDrawer" class="search-bar drawer drawer--top critical-hidden" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}" data-predictive-search-drawer>
  <div class="search-bar__interior">
    <div class="search-form__container" data-search-form-container>
      <form class="search-form search-bar__form" action="{{ routes.search_url }}" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input
            type="text"
            name="q"
            placeholder="{{ 'general.search.placeholder' | t }}"
            role="combobox"
            aria-autocomplete="list"
            aria-owns="predictive-search-results"
            aria-expanded="false"
            aria-label="{{ 'general.search.placeholder' | t }}"
            aria-haspopup="listbox"
            class="search-form__input search-bar__input"
            data-predictive-search-drawer-input
            data-base-url="{{ routes.search_url }}"
          />
          <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
          <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
        </div>

        <button class="search-bar__submit search-form__submit"
          type="submit"
          data-search-form-submit>
          {% include 'icon-search' %}
          <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </form>

      <div class="search-bar__actions">
        <button id="customCloseButton" type="button" class="btn--link search-bar__close js-drawer-close">
          {% include 'icon-close' %}
          <span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script>

  /* Forces "search" close */ 
const $close = document.getElementById(`customCloseButton`);
  
  $close.addEventListener('click', function(){
  	const $originalClose = document.querySelectorAll(`.js-drawer-close`);

    if (!$originalClose){
    return;
    	}
    
    for (var each of $originalClose){
    	each.click();
    }
  });
</script>


<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
  {% if section.settings.message %}
      <style>
        .announcement-bar {
          background-color: {{ section.settings.color_bg }};
        }

        .announcement-bar__link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}

          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }

        .announcement-bar__message {
          color: {{ section.settings.color_text }};
        }
      </style>

      <div id="announcementBar" class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement_bar_label' | t }}">
        {%- unless section.settings.message_link == blank -%}
          <a href="{{ section.settings.message_link }}" class="announcement-bar__link">
        {%- endunless -%}
            <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
        {%- unless section.settings.message_link == blank -%}
          </a>
        {%- endunless -%}
      </div>
  {% endif %}

  <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
    <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
      {% endif %}

      <div class="grid__item {{ logo_classes }}">
        {% comment %}
          Use the uploaded logo from theme settings if enabled.
          Site name gets precedence with H1 tag on homepage, div on other pages.
        {% endcomment %}
        {% if request.page_type == 'index' %}
          <h1 class="h2 site-header__logo">
        {% else %}
          <div class="h2 site-header__logo">
        {% endif %}
          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}" data-image-loading-animation>
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      {% if section.settings.align_logo == 'left' %}
        <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
          {% include 'site-nav', linklist: section.settings.main_linklist %}
        </nav>
      {% endif %}

      <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
        
        
        <div class="site-header__icons-wrapper">

          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
              </a>
            {% endif %}
          {% endif %}

          <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

          {% unless linklists[section.settings.main_linklist] == blank %}
            <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav"  aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
              {% include 'icon-hamburger' %}
              {% include 'icon-close' %}
            </button>
          {% endunless %}
        </div>

      </div>
    </div>

    <nav class="mobile-nav-wrapper medium-up--hide critical-hidden" role="navigation">
      <ul id="MobileNav" class="mobile-nav">
        {% for link in linklists[section.settings.main_linklist].links %}
          {%- assign outerLoopIndex = forloop.index -%}

          <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
            {% if link.links != blank %}
              {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
              <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
                <span class="mobile-nav__label">{{ link.title | escape }}</span>
                <div class="mobile-nav__icon">
                  {% include 'icon-chevron-right' %}
                </div>
              </button>
              <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
                <li class="visually-hidden" tabindex="-1" data-menu-title="2">
                  {{- link.title }} {{ 'layout.navigation.menu' | t -}}
                </li>
                <li class="mobile-nav__item border-bottom">
                  <div class="mobile-nav__table">
                    <div class="mobile-nav__table-cell mobile-nav__return">
                      <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
                        {% include 'icon-chevron-left' %}
                      </button>
                    </div>
                    <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
                      <span class="mobile-nav__label">{{ link.title | escape }}</span>
                    </span>
                  </div>
                </li>

                {% for childlink in link.links %}
                  <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                    {% if childlink.links != blank %}
                      {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
                      <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
                        <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                        <div class="mobile-nav__icon">
                          {% include 'icon-chevron-right' %}
                        </div>
                      </button>
                      <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
                        <li class="visually-hidden" tabindex="-1" data-menu-title="3">
                          {{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
                        </li>
                        <li class="mobile-nav__item border-bottom">
                          <div class="mobile-nav__table">
                            <div class="mobile-nav__table-cell mobile-nav__return">
                              <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
                                {% include 'icon-chevron-left' %}
                              </button>
                            </div>
                            <a href="{{ childlink.url }}"
                              class="mobile-nav__sublist-link mobile-nav__sublist-header"
                              {% if childlink.current %} aria-current="page"{% endif %}
                            >
                              <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                            </a>
                          </div>
                        </li>
                        {% for grandchildlink in childlink.links %}
                          <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                            <a href="{{ grandchildlink.url }}"
                              class="mobile-nav__sublist-link"
                              {% if grandchildlink.current %} aria-current="page"{% endif %}
                            >
                              <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                        {% endfor %}
                      </ul>
                    {% else %}
                      <a href="{{ childlink.url }}"
                        class="mobile-nav__sublist-link"
                        {% if childlink.current %} aria-current="page"{% endif %}
                      >
                        <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                      </a>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <a href="{{ link.url }}"
                class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
                {% if link.current %} aria-current="page"{% endif %}
              >
                <span class="mobile-nav__label">{{ link.title | escape }}</span>
              </a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </nav>
  </header>

  {% if section.settings.align_logo == 'center' %}
  <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
    {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
  </nav>
  {% endif %}
</div>



<script id="jsonData" type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": {{ shop.name | json }},
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
  {% endif %}
  "sameAs": [
    {{ settings.social_twitter_link | json }},
    {{ settings.social_facebook_link | json }},
    {{ settings.social_pinterest_link | json }},
    {{ settings.social_instagram_link | json }},
    {{ settings.social_tumblr_link | json }},
    {{ settings.social_snapchat_link | json }},
    {{ settings.social_youtube_link | json }},
    {{ settings.social_vimeo_link | json }}
  ],
  "url": {{ shop.url | append: page.url | json }}
}
</script>

{% if request.page_type == 'index' %}
  {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": {{ shop.name | json }},
      "potentialAction": {
        "@type": "SearchAction",
        "target": {{ potential_action_target | json }},
        "query-input": "required name=search_term_string"
      },
      "url": {{ shop.url | append: page.url | json }}
    }
  </script>
{% endif %}


<script>
  
  /*
  [EZFYLICENSE]
  
  1.3.3:
  - Fix search bar not covering menu when using sticky announcement on "homepage" only
  
  1.3.2:
  - Show "only on home page" fix
  
  1.3.1:
  - Changed -1px to 0px to avoid minor jumping
  - Fixed sticky announcement not showing up above the header on some occasions
  
  1.3.0:
  - Now it works with older themes (tested on Debut 11);
  
  1.2.0:
  - Dropdown being hidden by announcement bar below header
  
  1.1.9:
  - Fixed tons of bugs, especially related to the announcement bar below the header
  
  [EZFYLICENSE]
  */
  
  
window.ezfyStickyNavbar = window.ezfyStickyNavbar || {};

ezfyStickyNavbar = (function() {
    const $navbar = document.getElementById(`shopify-section-header`);

    let options = {
        stickyNavbarDesktop: _getAttributeOption('data-ezfy-sticky-navbar-desktop'),
        stickyNavbarMobile: _getAttributeOption('data-ezfy-sticky-navbar-mobile'),
        stickyNavbarHomepage: _getAttributeOption('data-ezfy-sticky-navbar-homepage'),
        stickyAnnouncementDesktop: _getAttributeOption('data-ezfy-sticky-announcement-desktop'),
        stickyAnnouncementMobile: _getAttributeOption('data-ezfy-sticky-announcement-mobile'),
        stickyAnnouncementHomepage: _getAttributeOption('data-ezfy-sticky-announcement-homepage'),
        enableBoxShadow: _getAttributeOption('data-ezfy-enable-box-shadow'),
        announcementBarBelow: _getAttributeOption('data-ezfy-announcement-bar-below')
    }


    function _loadScript(src) {
        return new Promise(function(resolve, reject) {
            var s;
            s = document.createElement('script');
            s.src = src;
            s.onload = resolve;
            s.onerror = reject;
            document.head.appendChild(s);
        });
    }

  /* Inserts a specific element BEFORE an element. 
  
  
  
  */
    function _insertAfter(referenceNode, newNode) {

        if (!referenceNode || !newNode) {
          throw new Error ("_insertAfter error: either referenceNode or newNode do not exist.");
        }
        referenceNode.parentNode.insertBefore(newNode, referenceNode.previousSibling);
    }

    function _isHomePage() {
        return window.location.pathname === '/';
    }

    function _isProductPage() {
        return /product/.test(window.location.href);
    }

    function _isCartPage() {
        return /cart/.test(window.location.href);
    }

    function _getAttributeOption(dataAttribute) {
        const element = document.querySelector(`[${dataAttribute}]`);

        if (!element) {
            return null;
        }

        const attr = element.getAttribute(dataAttribute);

        if (attr === 'true') {
            return true;
        } else if (attr === 'false') {
            return false
        } else {
            return attr;
        }
    }

    function _addStyle(styleString) {
        const style = document.createElement('style');
        style.textContent = styleString;
        document.head.append(style);
    }

    function initPreventScrollOnClickVariable() {

        if (window.scrollY !== 0) {
            return window.ezfy_sticky_nav_current_position = window.scrollY;
        }
    }


    function preventScrollOnClick() {
        var btn = document.querySelectorAll(`.js-mobile-nav-toggle,.site-header__search-toggle `);
        window.ezfy_sticky_nav_scroll_pos = -1;


        for (var each of btn) {
            each.addEventListener("click", function(e) {
                const pos = document.documentElement.scrollTop;
                const isSearch = () => e.target.classList.contains("site-header__search-toggle") || e.target.classList.contains("icon-search");

                console.log("my previous pos: ", window.ezfy_sticky_nav_current_position);

                console.log("is search", isSearch());


                if (isSearch) {
                    console.log(window.ezfy_sticky_nav_current_position);
                    return window.scrollTo(0, window.ezfy_sticky_nav_current_position);
                }

                if (pos <= 0) {
                    window.scrollTo(0, window.ezfy_sticky_nav_scroll_pos);
                }

                window.ezfy_sticky_nav_scroll_pos = pos;

            });
        }
    }

    function _isMobile() {
        return window.matchMedia("(max-width: 767px)").matches;
    }
  
  
  function _addSpacingForMenuWhenAnnouncementBarBelow($announcement){
    
    if (!_isMobile()){
    	return;
    }
    
    try{
      	const height = $announcement.offsetHeight;
      
		let $menu = document.querySelector(`.mobile-nav-wrapper`);
        $menu.style.marginTop = `${height}px`;
    } catch(err){

    }
  }
  
  function _forceDropdownAboveAnnouncementBar(){
  	
  }


    function handleStickyAnnouncementBar() {


        const $container = document.querySelector(`.page-container`);
        const $announcement = document.querySelector(`.announcement-bar`);
        const $parent = document.querySelector(`.cart-popup-wrapper`);
        const $header = document.getElementById(`shopify-section-header`);
        const $navbar = document.querySelector(`div[data-section-id="header"]`)
        const $jsonScript = document.getElementById(`jsonData`);


        if (!$announcement || !$parent) {
            //           return;
        }
      
      

        if (options.announcementBarBelow) {
            $announcement.classList.add("announcement-bar--below");
            $announcement.style.display = 'block';
            
          	
            if ((options.stickyAnnouncementDesktop && options.stickyNavbarDesktop) || 
                (options.stickyAnnouncementMobile && options.stickyNavbarMobile)){
              _insertAfter ( $jsonScript , $announcement );
            } else {
                _insertAfter ( $container , $announcement );
            }
              
          
          if (_isMobile() && options.stickyAnnouncementMobile && !options.stickyNavbarMobile ||
             _isMobile() && !options.stickyAnnouncementMobile && options.stickyNavbarMobile){
          	 _insertAfter ( $container , $announcement );
          }

            
         
          if (_isMobile() && !options.stickyAnnouncementMobile && options.stickyNavbarMobile  || 
             !_isMobile() && !options.stickyAnnouncementDesktop && options.stickyNavbarDesktop){
            $announcement.style.position = 'relative';
            $announcement.style.zIndex = '1';
             }
          
           _addSpacingForMenuWhenAnnouncementBarBelow($announcement);
          
        } 
      
      
        else if (!options.announcementBarBelow) {
          
          if (options.stickyAnnouncementMobile && !options.stickyNavbarMobile && _isMobile() ||
             options.stickyAnnouncementDesktop && !options.stickyNavbarDesktop && !_isMobile()){
                        /* removes announcement bar from inside header and place it on top of the header */
               _insertAfter($header, $announcement);
          }
                   

        }


        if (!options.stickyAnnouncementMobile && options.stickyNavbarMobile && _isMobile() ||
            !options.stickyAnnouncementDesktop && options.stickyNavbarDesktop && !_isMobile()) {

            /* removes announcement bar from inside header and place it on top of the header */
          
          if (!options.announcementBarBelow) {
            return _insertAfter($header, $announcement);
          } 
        }


        if ((options.stickyNavbarDesktop && options.stickyAnnouncementDesktop && !_isMobile()) ||
            (options.stickyNavbarMobile && options.stickyAnnouncementMobile && _isMobile())) {

            //           _insertAfter( $header , $announcement  );


            if (options.announcementBarBelow) {
                let $siteHeader = document.querySelector(`.site-header`);
                _insertAfter($announcement, $siteHeader);
            }


            return;
        }




    }

    function handlePinnedNavbar() {
        const observer = new IntersectionObserver(
            ([e]) => {

                e.target.classList.toggle("is-pinned", e.intersectionRatio < 1);

                //                const $announcement = document.querySelector(`.announcement-bar`);

                //             if (!$announcement){
                //             	return
                //             }

                //             const $header = document.querySelector(`.is-pinned`);
                //             const height = $announcement.offsetHeight;

                //             $header.setAttribute("style", `padding-top:${height}px;`);
                //             console.log(height);



            }, {
                threshold: [1]
            }
        );

        observer.observe($navbar);
    }
  
  function _sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
  
  function handleSearchBarHeight(){
    const $search = document.querySelector(`.site-header__search-toggle`);
    
    if (!$search){
    	return;
    }

    
    $search.addEventListener('click', async function(e){
      
      e.preventDefault();
          let height = 0;
    const $searchBar = document.querySelector(`#SearchDrawer`);
      
          const $header =  document.querySelector(`.site-header`);
  	const $announcement = document.querySelector(`#announcementBar`);    
    
    height += $header.offsetHeight 

    if ($announcement){
      height += $announcement.offsetHeight;
    }
      
      console.log(height);

      
      await _sleep(20);
      
      
      $searchBar.setAttribute("style", `height:${height}px;`);
    });
    
  	
  }


    return {
        init: function() {


            document.addEventListener("DOMContentLoaded", function() {

                handleStickyAnnouncementBar();
                handlePinnedNavbar();
                preventScrollOnClick();
              	handleSearchBarHeight();
            });

            window.addEventListener("resize", function() {
                handleStickyAnnouncementBar();
            });

            window.addEventListener("load", function() {
                console.log('resize');
            });

            window.addEventListener("scroll", function() {
                initPreventScrollOnClickVariable();
            });

        }
    };
})();


ezfyStickyNavbar.init();
</script>



{% schema %}
{
  "name": {
    "cs": "Záhlaví",
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "헤더",
    "nb": "Header",
    "nl": "Koptekst",
    "pl": "Nagłówek",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "tr": "Üstbilgi",
    "vi": "Đầu trang",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
   	  {
        "type": "header",
        "content": "Sticky Navbar by EZFY"
      },
   	  {
        "type": "paragraph",
        "content": "** Navbar **"
      },
      {
        "type": "checkbox",
        "id": "sticky-navbar-desktop", 
        "label": "Sticky on desktop",
		"default": true
      },
      {
        "type": "checkbox",
        "id": "sticky-navbar-mobile", 
        "label": "Sticky on mobile",
		"default": true
      },
      {
        "type": "checkbox",
        "id": "sticky-navbar-homepage", 
        "label": "Sticky on homepage only",
		"default": false
      },
 {
          "type":      "range",
          "id":        "font-size-navbar-desktop",
          "min":       8,
          "max":        35,
          "step":       1,
          "unit":       "px",
          "label":     "Font size on desktop",
		  "info": "Default: 15",
          "default":   15
      },
 {
          "type":      "range",
          "id":        "font-size-navbar-mobile",
          "min":       8,
          "max":        35,
          "step":       1,
          "unit":       "px",
          "label":     "Font size on mobile",
		  "info": "Default: 15",
          "default":   15
      },
   	  {
        "type": "paragraph",
        "content": "** Announcement Bar ** (More options at the bottom of the settings)"
      },
      {
        "type": "checkbox",
        "id": "sticky-announcement-desktop",
        "label": "Sticky on desktop",
		"default": true
      },
	  {
        "type": "checkbox",
        "id": "sticky-announcement-mobile",
        "label": "Sticky on mobile",
		"default": true
      },
	  {
        "type": "checkbox",
        "id": "sticky-announcement-homepage",
        "label": "Sticky on homepage only",
		"default": false
      },
 {
          "type":      "range",
          "id":        "font-size-announcement-desktop",
          "min":       8,
          "max":        35,
          "step":       1,
          "unit":       "px",
          "label":     "Font size on desktop",
		  "info": "Default: 15",
          "default":   15
      },
 {
          "type":      "range",
          "id":        "font-size-announcement-mobile",
          "min":       8,
          "max":        35,
          "step":       1,
          "unit":       "px",
          "label":     "Font size on mobile",
		  "info": "Default: 15",
          "default":   15
      },
      {
         "type":      "color",
         "id":        "bg-color-announcement",
         "label":     "Background color",
         "default":   "#3a3a3a"
      },
      {
         "type":      "color",
         "id":        "text-color-announcement",
         "label":     "Text color",
         "default":   "#ffffff"
      },
      {
         "type":      "color",
         "id":        "bg-color-hover-announcement",
         "label":     "Background color on hover",
         "default":   "#3a3a3a"
      },
      {
         "type":      "color",
         "id":        "text-color-hover-announcement",
         "label":     "Text color on hover",
         "default":   "#ffffff"
      },
	  {
        "type": "paragraph",
        "content": "** Extra Options **"
      },

      {
        "type": "checkbox",
        "id": "enable-box-shadow",
        "label": "Enable shadow",
		"info": "Adds a subtle shadow below the navbar.",
		"default": true
      },
	  {
        "type": "checkbox",
        "id": "announcement_bar_below",
        "label": "Announcement bar below header",
		"default": false
      },

   {
        "type": "header",
        "content": "Original Settings"
      },
    {
      "type": "radio",
      "id": "align_logo",
      "label": {
        "cs": "Zarovnání loga",
        "da": "Logojustering",
        "de": "Logo-Ausrichtung",
        "en": "Logo alignment",
        "es": "Alineación de logo",
        "fi": "Logon tasaus",
        "fr": "Alignement du logo",
        "it": "Allineamento logo",
        "ja": "ロゴアラインメント",
        "ko": "로고 정렬",
        "nb": "Logojustering",
        "nl": "Logo-uitlijning",
        "pl": "Wyrównanie logo",
        "pt-BR": "Alinhamento do logotipo",
        "pt-PT": "Alinhamento do logótipo",
        "sv": "Logojustering",
        "th": "การจัดวางโลโก้",
        "tr": "Logo hizalaması",
        "vi": "Căn chỉnh logo",
        "zh-CN": "logo 对齐方式",
        "zh-TW": "商標對齊"
      },
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": {
            "cs": "Doleva",
            "da": "Venstre",
            "de": "Links",
            "en": "Left",
            "es": "Izquierda",
            "fi": "Vasen",
            "fr": "Gauche",
            "it": "Sinistra",
            "ja": "左",
            "ko": "왼쪽",
            "nb": "Venstre",
            "nl": "Links",
            "pl": "Do lewej",
            "pt-BR": "Esquerda",
            "pt-PT": "Esquerda",
            "sv": "Vänster",
            "th": "ด้านซ้าย",
            "tr": "Sol",
            "vi": "Bên trái",
            "zh-CN": "左侧",
            "zh-TW": "左方"
          }
        },
        {
          "value": "center",
          "label": {
            "cs": "Na střed",
            "da": "Centreret",
            "de": "Mittig",
            "en": "Centered",
            "es": "Centrada",
            "fi": "Keskitetty",
            "fr": "Centré",
            "it": "Centrato",
            "ja": "中央揃え",
            "ko": "센터 맞추기",
            "nb": "Sentrert",
            "nl": "Gecentreerd",
            "pl": "Wyśrodkowane",
            "pt-BR": "Centralizado",
            "pt-PT": "Centrado",
            "sv": "Centrera",
            "th": "ตรงกลาง",
            "tr": "Orta",
            "vi": "Giữa",
            "zh-CN": "居中",
            "zh-TW": "置中"
          }
        }
      ]
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "cs": "Obrázek loga",
        "da": "Logobillede",
        "de": "Logo-Foto",
        "en": "Logo image",
        "es": "Logo",
        "fi": "Logokuva",
        "fr": "Image du logo",
        "it": "Immagine del logo",
        "ja": "ロゴ画像",
        "ko": "로고 이미지",
        "nb": "Logobilde",
        "nl": "Afbeelding van logo",
        "pl": "Obraz logo",
        "pt-BR": "Imagem do logotipo",
        "pt-PT": "Imagem do logótipo",
        "sv": "Logobild",
        "th": "รูปภาพโลโก้",
        "tr": "Logo görseli",
        "vi": "Hình ảnh logo",
        "zh-CN": "logo 图片",
        "zh-TW": "標誌圖片"
      }
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": {
        "cs": "Šířka vlastního loga",
        "da": "Tilpasset logobredde",
        "de": "Logobreite",
        "en": "Custom logo width",
        "es": "Ancho del logo personalizado",
        "fi": "Mukautetun logon leveys",
        "fr": "Largeur personnalisée du logo",
        "it": "Larghezza logo personalizzato",
        "ja": "ロゴの幅をカスタマイズする",
        "ko": "사용자 지정 로고 폭",
        "nb": "Tilpasset logobredde",
        "nl": "Aangepaste logo-breedte",
        "pl": "Niestandardowa szerokość logo",
        "pt-BR": "Largura do logotipo personalizado",
        "pt-PT": "Largura de logótipo personalizada",
        "sv": "Anpassad logotypsbredd",
        "th": "ความกว้างของโลโก้แบบกำหนดเอง",
        "tr": "Özel logo genişliği",
        "vi": "Chiều rộng logo tùy chỉnh",
        "zh-CN": "自定义 logo 宽度",
        "zh-TW": "自訂商標寬度"
      },
      "min": 50,
      "max": 250,
      "step": 5,
      "unit": "px",
      "default": 100
    },
    {
      "type": "link_list",
      "id": "main_linklist",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "tr": "Menü",
        "vi": "Menu",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": {
        "cs": "Panel oznámení",
        "da": "Meddelelseslinje",
        "de": "Ankündigungsbereich",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "it": "Barra degli annunci",
        "ja": "告知バー",
        "ko": "공지 표시줄",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pl": "Pasek ogłoszeń",
        "pt-BR": "Barra de avisos",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "tr": "Duyuru çubuğu",
        "vi": "Thanh thông báo",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
    {
      "type": "checkbox",
      "id": "message",
      "label": {
        "cs": "Zobrazit oznámení",
        "da": "Vis meddelelse",
        "de": "Ankündigung anzeigen",
        "en": "Show announcement",
        "es": "Mostrar anuncio",
        "fi": "Näytä ilmoitus",
        "fr": "Afficher l'annonce",
        "it": "Mostra annuncio",
        "ja": "告知を表示する",
        "ko": "공지 표시",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pl": "Pokaż ogłoszenie",
        "pt-BR": "Exibir comunicado",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "tr": "Duyuruyu göster",
        "vi": "Hiển thị thông báo",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      },
      "default": false
    },
    {
      "type": "text",
      "id": "message_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "cs": "Tady můžete zadat oznámení",
        "da": "Meddel noget her",
        "de": "Hier etwas ankündigen",
        "en": "Announce something here",
        "es": "Anuncia algo aquí",
        "fi": "Ilmoita jotakin tässä",
        "fr": "Annoncez quelque chose ici",
        "it": "Annuncia qualcosa qui",
        "ja": "ここで告知してください",
        "ko": "여기에 공지하십시오",
        "nb": "Kunngjør noe her",
        "nl": "Kondig hier iets aan",
        "pl": "Ogłoś coś tutaj",
        "pt-BR": "Anuncie algo aqui",
        "pt-PT": "Anunciar algo aqui",
        "sv": "Meddela något här",
        "th": "ประกาศข้อความที่นี่",
        "tr": "Buraya bir duyuru ekleyin",
        "vi": "Thông báo điều gì đó tại đây",
        "zh-CN": "在此处进行公告",
        "zh-TW": "在此公告資訊"
      }
    },
    {
      "type": "url",
      "id": "message_link",
      "label": {
        "cs": "Odkaz",
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "it": "Link",
        "ja": "リンク",
        "ko": "링크",
        "nb": "Kobling",
        "nl": "Link",
        "pl": "Link",
        "pt-BR": "Link",
        "pt-PT": "Ligação",
        "sv": "Länk",
        "th": "ลิงก์",
        "tr": "Bağlantı",
        "vi": "Liên kết",
        "zh-CN": "链接",
        "zh-TW": "連結"
      },
      "info": {
        "cs": "Volitelné",
        "da": "Valgfri",
        "de": "Optional",
        "en": "Optional",
        "es": "Opcional",
        "fi": "Valinnainen",
        "fr": "Facultatif",
        "it": "Facoltativo",
        "ja": "オプション",
        "ko": "선택 사항",
        "nb": "Valgfritt",
        "nl": "Optioneel",
        "pl": "Opcjonalnie",
        "pt-BR": "Opcional",
        "pt-PT": "Opcional",
        "sv": "Valfritt",
        "th": "ไม่จำเป็น",
        "tr": "İsteğe bağlı",
        "vi": "Không bắt buộc",
        "zh-CN": "可选",
        "zh-TW": "(選填)"
      }
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "cs": "Panel",
        "da": "Bjælke",
        "de": "Zeile",
        "en": "Bar",
        "es": "Barra",
        "fi": "Palkki",
        "fr": "Barre",
        "it": "Barra",
        "ja": "バー",
        "ko": "바",
        "nb": "Felt",
        "nl": "Balk",
        "pl": "Pasek",
        "pt-BR": "Barra",
        "pt-PT": "Barra",
        "sv": "Fält",
        "th": "แถบ",
        "tr": "Çubuk",
        "vi": "Thanh",
        "zh-CN": "栏",
        "zh-TW": "橫條"
      },
      "default": "#3a3a3a"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": "#ffffff"
    }
  ]
}
{% endschema %}