I spent a few days trying to get the header to operate correctly. I made the header transparent on load, and then blurred when scrolling. It works great on desktop, but I am trying to disable transparent header on mobile. I can not do it what so ever. The only way is to uncheck the transparent header in the customizer, which removes it as well from the desktop. This is my current code.
{% liquid
assign logo = section.settings.logo
assign logo_max_width = section.settings.logo_max_width
assign logo_position = section.settings.logo_position
assign navigation_position = section.settings.navigation_position
assign style = section.settings.style
assign transparent_home = section.settings.enable_transparent_home
assign color_text_transparent = section.settings.color_text_transparent
assign color_icon_transparent = section.settings.color_icon_transparent
assign color_border_transparent = section.settings.color_border_transparent
assign color_count_transparent = section.settings.color_count_transparent
assign opacity_border_transparent = section.settings.opacity_border_transparent
assign logo_transparent = section.settings.logo_transparent
assign border_opacity = opacity_border_transparent | divided_by: 100.0
assign menu = section.settings.menu
assign secondary_menu = section.settings.secondary_menu
assign links = linklists[menu].links
assign secondary_links = linklists[secondary_menu].links
assign secondary_menu_valid = false
if secondary_menu != blank and secondary_menu != menu
assign secondary_menu_valid = true
endif
assign enable_locale_selector = section.settings.enable_locale_selector
assign enable_country_selector = section.settings.enable_country_selector
%}
<script>
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.header--transparent-home');
function handleScrollAndResize() {
// Check if the device width is greater than 768 pixels for desktop
if (window.innerWidth > 768) {
// Desktop: Apply transparency effects based on scroll position
if (window.scrollY > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
} else {
// Mobile: Always ensure no transparency effects
header.classList.remove('scrolled');
}
}
// Attach the event listeners to handle both scroll and resize events
window.addEventListener('scroll', handleScrollAndResize);
window.addEventListener('resize', handleScrollAndResize);
// Initial call to set up correct state based on current conditions
handleScrollAndResize();
});
</script>
{%- capture header_logo -%}
<h1 class="header__logo">
<a
class="header__logo-link"
href="{{ routes.root_url }}"
{% if logo != blank or logo_transparent != blank %}
aria-label="{{ shop.name }}"
{% endif %}
>
{%- if logo != blank -%}
{%- render 'image', image: logo, wrapper_class: 'regular-logo', preload: true -%}
{%- endif -%}
{%- if logo_transparent != blank -%}
{%- render 'image', image: logo_transparent, wrapper_class: 'transparent-logo', preload: true -%}
{%- endif -%}
{%- if logo == blank or logo_transparent == blank -%}
<span class="header__logo-text">{{ shop.name }}</span>
{%- endif -%}
</a>
</h1>
{%- endcapture -%}
{%- capture search_icon -%}
<a
class="header__icon-touch header__icon-touch--search no-transition"
href="{{ routes.search_url }}"
data-search
aria-label="{{ 'general.accessibility.open_search' | t }}"
>
{% render 'icon-button', icon: 'search' %}
</a>
{%- endcapture -%}
{%- capture account_icon -%}
<a
class="header__icon-touch header__icon-touch--account"
href="{{ routes.account_url }}"
aria-label="{{ 'general.accessibility.go_account' | t }}"
>
{% render 'icon-button', icon: 'account' %}
</a>
{%- endcapture -%}
{%- capture cart_icon -%}
<a
class="header__icon-touch header__icon-touch--cart no-transition"
href="{{ routes.cart_url }}"
aria-label="{{ 'general.accessibility.open_cart' | t }}"
data-js-cart-icon
>
{% render 'icon-button', icon: 'shopping-cart' %}
<div class="header__cart-count" data-js-cart-indicator>
<span data-js-cart-count>{{ cart.item_count }}</span>
</div>
</a>
{%- endcapture -%}
{%- capture nav -%}
<nav class="header__links" data-navigation>
{%- if menu == blank and secondary_menu != blank -%}
{% render 'navigation', menu: secondary_links %}
{%- else -%}
{% render 'navigation', menu: links %}
{%- endif -%}
</nav>
{%- endcapture -%}
{%- capture burger -%}
<button
class="header__menu-icon header__icon-touch header__icon-menu"
aria-label="{{ 'general.accessibility.open_menu' | t }}"
data-js-menu-button
>
{% render 'icon-button', icon: 'menu' %}
</button>
{%- endcapture -%}
{%- capture filler -%}<div class="header__filler"></div>{%- endcapture -%}
<header
data-section-id="{{ section.id }}"
data-section-type="header"
{% if settings.enable_sticky_header %}
data-enable-sticky-header="true"
{% endif %}
{% if transparent_home %}
data-transparent-home="true"
{% endif %}
data-mobile-search-position="{{ section.settings.mobile_search_position }}"
class="
header
js-header
header--{{ style }}
header--logo-{{ logo_position }}
header--navigation-{{ navigation_position }}
{% if logo != blank -%}
header--has-logo
{%- endif %}
{% if transparent_home and template.name == 'index' %}
header--transparent-home
{% endif %}
{% if logo_transparent != blank %}
header--has-transparent-logo
{% endif %}
{% if shop.customer_accounts_enabled -%}
header--has-accounts
{%- endif %}
{% if secondary_menu_valid -%}
header--has-secondary-menu
{%- endif %}
{% if menu == blank and secondary_menu != blank -%}
header--primary-menu-is-secondary
{%- endif %}
"
style="
--width-max-logo: {{ logo_max_width }}px;
--color-cart-count-transparent: {{ color_count_transparent }};
--color-text-transparent: {{ color_text_transparent }};
--color-icon-transparent: {{ color_icon_transparent }};
--color-border-transparent: {{ color_border_transparent | color_modify: 'alpha', border_opacity }};
"
>
<a href="#main" class="header__skip-top-content btn btn--primary btn--small">
{{ 'general.accessibility.skip_to_content' | t }}
</a>
<div class="header__inner">
<div class="header__left">
{%- if logo_position == 'center' and navigation_position == 'below' and style == 'inline' -%}
{{ burger }}
{{ search_icon }}
{%- elsif logo_position == 'left' and style == 'inline' and navigation_position != 'below' -%}
{{ header_logo }}
{{ burger }}
{{ nav }}
{%- elsif logo_position == 'left'
and style == 'inline'
and secondary_menu_valid
and navigation_position == 'below'
-%}
{{ burger }}
{{ header_logo }}
{%- elsif logo_position == 'left' and style == 'inline' and navigation_position == 'below' -%}
{{ burger }}
{{ header_logo }}
{%- elsif logo_position == 'left' and style == 'icon' -%}
{{ header_logo }}
{{ burger }}
{%- elsif logo_position == 'center' and style == 'inline' -%}
{{ burger }}
{{ nav }}
{%- elsif logo_position == 'center' and style == 'icon' -%}
{{ burger }}
{%- endif -%}
</div>
<div class="header__center">
{{ header_logo }}
</div>
<div class="header__right">
{%- unless logo_position == 'center' and navigation_position == 'below' and style == 'inline' -%}
{{ search_icon }}
{%- endunless -%}
{%- if shop.customer_accounts_enabled -%}
{{ account_icon }}
{%- endif -%}
{{ cart_icon }}
</div>
{%- if navigation_position == 'below' and style == 'inline' -%}
<div class="header__below-left">
<!-- logo menu needs to always be somewhre else -->
{%- if logo_position == 'left' -%}
{%- if secondary_menu_valid -%}
{{ burger }}
{%- endif -%}
{{ nav }}
{%- else -%}
{{ filler }}
{%- endif -%}
</div>
<div class="header__below-center">
{%- if logo_position == 'center' -%}
{{ nav }}
{%- endif -%}
</div>
{%- endif -%}
{% render 'header-quick-search' %}
{% if settings.cart_type == 'flyout' %}
{% render 'quick-cart' %}
{% endif %}
</div>
<div class="no-js-menu no-js-menu--desktop">
{% render 'no-js-navmenu', menu: menu, secondary_menu: secondary_menu %}
</div>
{% render 'drawer-menu',
menu: menu,
secondary_menu: secondary_menu,
enable_locale_selector: enable_locale_selector,
enable_country_selector: enable_country_selector
%}
</header>
<style>
.header {
position: relative;
width: 100%;
height: 100px;
color: var(--color-text-header, black);
padding: var(--spacing-small, 10px) var(--space-outer, 20px);
overflow: hidden;
z-index: 1000;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
.header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.0);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.header.scrolled::before {
opacity: 1;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.header--transparent-home {
background-color: transparent;
}
.header__content {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-family: Arial, sans-serif;
font-size: 24px;
color: #FF8C00;
}
.header--transparent {
background-color: transparent;
box-shadow: none;
}
@media (max-width: 768px) {
.header--transparent-home, .header--transparent-home.scrolled {
background-color: #FFFFFF;
}
}
</style>
<script>
// Set heading height at component level
const header = document.querySelector('.header__outer-wrapper');
document.documentElement.style.setProperty('--height-header', header.offsetHeight + 'px');
</script>
<style>
{% if transparent_home %}
.template-index #main {
margin-top: calc((var(--height-header) + var(--announcement-height)) * -1);
}
{% endif %}
</style>
{% schema %}
{
"name": "t:sections.header.name",
"class": "header__outer-wrapper",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.image.label"
},
{
"id": "logo_max_width",
"type": "range",
"min": 50,
"max": 350,
"step": 10,
"unit": "px",
"label": "t:sections.header.settings.logo_max_width.label",
"default": 200
},
{
"id": "menu",
"type": "link_list",
"label": "t:sections.header.settings.menu.label",
"default": "main-menu"
},
{
"id": "secondary_menu",
"type": "link_list",
"label": "t:sections.header.settings.secondary_menu.label"
},
{
"id": "style",
"type": "select",
"label": "t:sections.header.settings.style.label",
"options": [
{ "value": "inline", "label": "t:sections.header.settings.style.options__1" },
{ "value": "icon", "label": "t:sections.header.settings.style.options__2" }
],
"default": "icon"
},
{
"id": "navigation_position",
"type": "select",
"label": "t:sections.header.settings.navigation_position.label",
"options": [
{ "value": "inline", "label": "t:sections.header.settings.navigation_position.options__1" },
{ "value": "below", "label": "t:sections.header.settings.navigation_position.options__2" }
],
"default": "inline"
},
{
"id": "logo_position",
"type": "select",
"label": "t:sections.header.settings.logo_position.label",
"options": [
{ "value": "left", "label": "t:sections.header.settings.logo_position.options__1" },
{ "value": "center", "label": "t:sections.header.settings.logo_position.options__2" }
],
"default": "center"
},
{
"id": "mobile_search_position",
"type": "select",
"label": "t:sections.header.settings.mobile_search_position.label",
"options": [
{ "value": "menu", "label": "t:sections.header.settings.mobile_search_position.options__1" },
{ "value": "header", "label": "t:sections.header.settings.mobile_search_position.options__2" }
],
"default": "menu"
},
{
"type": "header",
"content": "t:shared.settings.disclosure.header__language.content",
"info": "t:shared.settings.disclosure.header__language.info"
},
{
"type": "checkbox",
"id": "enable_locale_selector",
"label": "t:shared.settings.disclosure.enable_locale_selector.label",
"default": true
},
{
"type": "header",
"content": "t:shared.settings.disclosure.header__country.content",
"info": "t:shared.settings.disclosure.header__country.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"label": "t:shared.settings.disclosure.enable_country_selector.label",
"default": true
},
{
"type": "header",
"content": "t:sections.header.settings.transparent__header.content"
},
{
"id": "enable_transparent_home",
"type": "checkbox",
"label": "t:sections.header.settings.enable_transparent_home.label",
"info": "t:sections.header.settings.enable_transparent_home.info",
"default": true
},
{
"id": "color_text_transparent",
"type": "color",
"label": "t:sections.header.settings.color_text_transparent.label",
"default": "#ffffff"
},
{
"id": "color_icon_transparent",
"type": "color",
"label": "t:sections.header.settings.color_icon_transparent.label",
"default": "#ffffff"
},
{
"id": "color_count_transparent",
"type": "color",
"label": "t:sections.header.settings.color_count_transparent.label",
"default": "#000"
},
{
"id": "color_border_transparent",
"type": "color",
"label": "t:sections.header.settings.color_border_transparent.label",
"default": "#ffffff"
},
{
"id": "opacity_border_transparent",
"type": "range",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.header.settings.opacity_border_transparent.label",
"default": 0
},
{
"id": "logo_transparent",
"type": "image_picker",
"label": "t:sections.header.settings.logo_transparent.label",
"info": "t:sections.header.settings.logo_transparent.info"
}
]
}
{% endschema %}
