Focal Transparent Header nur auf Mobil Version nutzen

[Pallmann2024]

Hallo,

ich möchte den Transparent Header für den Desktop ausblenden. 

Wie mache ich das genau? Das ist der Codebereich denke ich:

<style>
  :root {
    --enable-sticky-header: {% if section.settings.enable_sticky_header %}1{% else %}0{% endif %};
    --enable-transparent-header: {% if request.page_type == 'index' and section.settings.enable_transparent_header %}1{% else %}0{% endif %};
    --loading-bar-background: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }}; /* Prevent the loading bar to be invisible */
  }

  #shopify-section-{{ section.id }} {
    {%- assign header_border_color = settings.header_background | color_mix: settings.header_text_color, 85 -%}

    --header-background: {{ settings.header_background.red }}, {{ settings.header_background.green }}, {{ settings.header_background.blue }};
    --header-text-color: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }};
    --header-border-color: {{ header_border_color.red }}, {{ header_border_color.green }}, {{ header_border_color.blue }};
    --reduce-header-padding: {% if section.settings.reduce_desktop_padding %}1{% else %}0{% endif %};

    {%- if section.settings.enable_sticky_header -%}
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    {%- else -%}
      position: relative;
    {%- endif -%}

    z-index: 4;
  }

  {%- if section.settings.enable_sticky_header -%}
    .shopify-section--announcement-bar ~ #shopify-section-{{ section.id }} {
      top: calc(var(--enable-sticky-announcement-bar, 0) * var(--announcement-bar-height, 0px));
    }
  {%- endif -%}

  {%- if request.page_type == 'index' and section.settings.enable_transparent_header -%}
    #shopify-section-{{ section.id }} {
      margin-bottom: calc(-1 * (var(--header-height, 0px) + var(--enable-sticky-announcement-bar, 0) * var(--announcement-bar-height, 0px)));
    }

    .js #shopify-section-{{ section.id }} .header--transparent {
      {%- if settings.header_text_color == section.settings.transparent_header_text_color -%}
        {%- assign header_bubble_text_color = settings.header_background -%}
      {%- else -%}
        {%- assign header_bubble_text_color = settings.header_text_color -%}
      {%- endif -%}

      --header-background: transparent;
      --header-text-color: {{ section.settings.transparent_header_text_color.red }}, {{ section.settings.transparent_header_text_color.green }}, {{ section.settings.transparent_header_text_color.blue }};
      --header-border-color: {{ section.settings.transparent_header_text_color.red }}, {{ section.settings.transparent_header_text_color.green }}, {{ section.settings.transparent_header_text_color.blue }}, 0.15;
      --header-transparent-bubble-text-color: {{ header_bubble_text_color.red }}, {{ header_bubble_text_color.green }}, {{ header_bubble_text_color.blue }};
    }
  {%- endif -%}

Ich bitte um Hilfe

[Ben310]

Probiere mal ab der relevanten Zeile oben:

{%- if request.page_type == 'index' and section.settings.enable_transparent_header -%}
  <style>
    @media (max-width: 768px) {
      #shopify-section-{{ section.id }} {
        margin-bottom: calc(-1 * (var(--header-height, 0px) + var(--enable-sticky-announcement-bar, 0) * var(--announcement-bar-height, 0px)));
      }

      .js #shopify-section-{{ section.id }} .header--transparent {
        {%- if settings.header_text_color == section.settings.transparent_header_text_color -%}
          {%- assign header_bubble_text_color = settings.header_background -%}
        {%- else -%}
          {%- assign header_bubble_text_color = settings.header_text_color -%}
        {%- endif -%}

        --header-background: transparent;
        --header-text-color: {{ section.settings.transparent_header_text_color.red }}, {{ section.settings.transparent_header_text_color.green }}, {{ section.settings.transparent_header_text_color.blue }};
        --header-border-color: {{ section.settings.transparent_header_text_color.red }}, {{ section.settings.transparent_header_text_color.green }}, {{ section.settings.transparent_header_text_color.blue }}, 0.15;
        --header-transparent-bubble-text-color: {{ header_bubble_text_color.red }}, {{ header_bubble_text_color.green }}, {{ header_bubble_text_color.blue }};
      }
    }
  </style>
{%- endif -%}