Header not acting appropriate

[MichaelD1]

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
%}

{%- capture header_logo -%}

{%- 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 -%}
{{ shop.name }}
{%- endif -%}

{%- 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’ %}

{%- 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’ %}

{%- 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’ %}

{{ cart.item_count }}

{%- endcapture -%}

{%- capture nav -%}

{%- if menu == blank and secondary_menu != blank -%} {% render 'navigation', menu: secondary_links %} {%- else -%} {% render 'navigation', menu: links %} {%- endif -%} {%- 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’ %}

{%- endcapture -%}

{%- capture filler -%}

{%- endcapture -%}

{{ 'general.accessibility.skip_to_content' | t }}

{%- 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 -%}

{{ header_logo }}

{%- unless logo_position == 'center' and navigation_position == 'below' and style == 'inline' -%} {{ search_icon }} {%- endunless -%}

{%- if shop.customer_accounts_enabled -%}
{{ account_icon }}
{%- endif -%}

{{ cart_icon }}

{%- if navigation_position == 'below' and style == 'inline' -%}

{%- if logo_position == 'left' -%} {%- if secondary_menu_valid -%} {{ burger }} {%- endif -%}

{{ nav }}
{%- else -%}
{{ filler }}
{%- endif -%}

{%- if logo_position == 'center' -%} {{ nav }} {%- endif -%}

{%- endif -%}

{% render ‘header-quick-search’ %}
{% if settings.cart_type == ‘flyout’ %}
{% render ‘quick-cart’ %}
{% endif %}

{% render 'no-js-navmenu', menu: menu, secondary_menu: secondary_menu %}

{% render ‘drawer-menu’,
menu: menu,
secondary_menu: secondary_menu,
enable_locale_selector: enable_locale_selector,
enable_country_selector: enable_country_selector
%}

.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;
}
[email removed] (max-width: 768px) {
.header–transparent-home, .header–transparent-home.scrolled {
background-color: #FFFFFF;
}
}

{% if transparent_home %} .template-index #main { margin-top: calc((var(--height-header) + var(--announcement-height)) * -1); } {% endif %}

{% 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 %}

[EBOOST]

Hi @MichaelD1 ,

Could you share your store URL? I will help to check it.