How To Make Header Glassmorphism Effect On Scroll In Shopify - eCommerce Thesis

How To Make Header Glassmorphism Effect On Scroll In Shopify

<{{ header_tag }}
  {% if header_tag == 'sticky-header' %}
    data-sticky-type="{{ section.settings.sticky_header_type }}"
  {% endif %}
  class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %} foysal-glass-header{% if section.settings.color_scheme contains 'dark' %} dark{% endif %}"
>
{% comment %}
<!-- Designed by Foysal Ahmed YouTube Channel -->
{% endcomment %}
.foysal-glass-header {
  background: rgba(255, 255, 255, 0.39) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 999;
}
.foysal-glass-header.dark {
  background: rgba(0, 0, 0, 0.39) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.foysal-glass-header.gradient::before {
  display: none !important;
}
.foysal-glass-header.shopify-section-header-sticky {
  background: rgba(255, 255, 255, 0.48) !important;
}
.foysal-glass-header.shopify-section-header-sticky.dark {
  background: rgba(0, 0, 0, 0.48) !important;
}
@supports not (backdrop-filter: blur(10px)) {
  .foysal-glass-header {
    background: rgba(255, 255, 255, 0.57) !important;
  }
  
  .foysal-glass-header.dark {
    background: rgba(0, 0, 0, 0.57) !important;
  }
}
.foysal-glass-header[class*="color-"] {
  color: inherit;
}
.foysal-glass-header .header__icon {
  opacity: 1;
  z-index: 1;
}
.foysal-glass-header--enhanced {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 749px) {
  .foysal-glass-header {
    background: rgba(255, 255, 255, 0.45) !important;
  }
  
  .foysal-glass-header.dark {
    background: rgba(0, 0, 0, 0.45) !important;
  }
}