Prestige Theme Home Navbar colour change

Store Design
, , ,

Topic summary

Navbar logo color on scroll in Shopify’s Prestige theme. The white SVG logo becomes invisible when the transparent header turns solid white on scroll; desired behavior is white logo initially, switching to darker/black on scroll.

Proposed approaches:

  • Code-based: Add a home-page-specific class to the to target styles only on the homepage. Suggested change in theme.liquid: append page-{{ page.title | replace: ’ ', ‘-’ }} to the body class. Guidance and screenshots provided. Beorma asked where to insert; a code line to replace was later specified.
  • Built-in setting: The theme already supports separate logos for transparent vs solid states. In Customize, upload the transparent header logo (transparent_logo) and the main logo; the theme will handle switching on scroll. A screenshot confirmed this option.

Current status and actions:

  • Easiest resolution: Use the theme’s native transparent header logo setting via Customize and upload both logo variants.
  • Optional: Keep the body class customization if further homepage-only styling is needed.

No additional CSS provided; discussion appears effectively resolved with the built-in setting.

Summarized with AI on December 21. AI used: gpt-5.
1

On my Shopify site I am using the transparent navigation on the home page in the Prestige Theme.

This issue I am having is that when I add a white logo svg on scroll the navbar changes to the is solid state and the white logo then becomes not visible against the white background.

I need to change it so that the logo is white and then transitions to black/darker when scrolled like the icons and links do. I imagine I just need to invert the logo or upload a second version of it somehow.

Thanks in advance!

2

@Beorma Hi have got it but i need a special class in your body tag (index as class when is home page) to out it for only the home page

can you please put “{{ page.title | replace: ’ ', ‘-’ }}” to your body tag as class:

like

3

@Beorma im really close to it , please follow my above code to add the template name as class to the body tag

ProtoMan44_0-1723719724023.png
ProtoMan44_0-1723719724023.png1881×368 255 KB

ProtoMan44_1-1723719725790.png
ProtoMan44_1-1723719725790.png1913×343 227 KB

4

Hi ProtoMan44,

Thanks for this!

Is this into theme.liquid code? Where in the code below should I add this?


    {%- render 'shadow-dom-templates' -%}

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

    
      {%- comment -%}
        This allows our theme to track when the user has scrolled a given amount of pixels, without relying on a global scroll listener. This helps
        to improve performance and reduce reflows.
      {%- endcomment -%}
    

    {%- if request.page_type != 'password' -%}
      {%- sections 'header-group' -%}
      {%- sections 'overlay-group' -%}
    {%- endif -%}
5

Hi @Beorma ,

Please send me the code of header.liquid file, I will help you add option for 2nd logo and change it

6

Hi Namphan, thank you very much for this:


{% schema %}
{
  "name": "t:sections.header.name",
  "class": "shopify-section--header",
  "tag": "header",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:global.colors.scheme",
      "default": "scheme-2"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky",
      "label": "t:sections.header.enable_sticky_header",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "hide_on_scroll",
      "label": "t:sections.header.hide_on_scroll",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_separation_border",
      "label": "t:sections.header.show_separation_border",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "reduce_padding",
      "label": "t:sections.header.reduce_padding",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.header.logo_category"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:global.image.image",
      "info": "t:sections.header.logo_size_recommendation"
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "min": 20,
      "max": 300,
      "step": 5,
      "unit": "px",
      "label": "t:global.image.width",
      "default": 140
    },
    {
      "type": "range",
      "id": "logo_mobile_max_width",
      "min": 20,
      "max": 200,
      "step": 5,
      "unit": "px",
      "label": "t:global.image.mobile_width",
      "default": 100
    },
    {
      "type": "header",
      "content": "t:sections.header.navigation_category"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "t:sections.header.menu",
      "default": "main-menu"
    },
    {
      "type": "link_list",
      "id": "sidebar_menu",
      "label": "t:sections.header.mobile_menu"
    },
    {
      "type": "select",
      "id": "menu_open_trigger",
      "label": "t:sections.header.menu_open_trigger",
      "info": "t:sections.header.menu_open_trigger_info",
      "options": [
        {
          "value": "hover",
          "label": "t:sections.header.menu_open_trigger_options.hover"
        },
        {
          "value": "click",
          "label": "t:sections.header.menu_open_trigger_options.click"
        }
      ],
      "default": "hover"
    },
    {
      "type": "checkbox",
      "id": "enable_search",
      "label": "t:sections.header.enable_search",
      "default": true
    },
    {
      "type": "header",
      "content": "t:sections.header.sidebar_navigation_category"
    },
    {
      "type": "color_scheme",
      "id": "sidebar_color_scheme",
      "label": "t:global.colors.scheme",
      "default": "scheme-2"
    },
    {
      "type": "select",
      "id": "sidebar_text_font",
      "label": "t:sections.header.sidebar_text_font",
      "options": [
        {
          "value": "heading",
          "label": "t:sections.header.sidebar_text_font_options.heading"
        },
        {
          "value": "body",
          "label": "t:sections.header.sidebar_text_font_options.body"
        }
      ],
      "default": "heading"
    },
    {
      "type": "checkbox",
      "id": "sidebar_show_dividers",
      "label": "t:sections.header.sidebar_show_dividers",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "sidebar_open_second_level_menus",
      "label": "t:sections.header.sidebar_open_second_level_menus",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.header.desktop_category"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "t:sections.header.layout",
      "options": [
        {
          "value": "logo_left_navigation_inline",
          "label": "t:sections.header.layout_options.logo_left_navigation_inline"
        },
        {
          "value": "logo_left_navigation_center",
          "label": "t:sections.header.layout_options.logo_left_navigation_center"
        },
        {
          "value": "logo_center_navigation_inline",
          "label": "t:sections.header.layout_options.logo_center_navigation_inline"
        },
        {
          "value": "logo_center_navigation_below",
          "label": "t:sections.header.layout_options.logo_center_navigation_below"
        },
        {
          "value": "drawer",
          "label": "t:sections.header.layout_options.drawer"
        }
      ],
      "default": "logo_left_navigation_inline"
    },
    {
      "type": "checkbox",
      "id": "show_icons",
      "label": "t:sections.header.show_icons",
      "default": true
    },
    {
      "type": "header",
      "content": "t:global.localization.country_region_selector_category",
      "info": "t:global.localization.country_region_selector_category_info"
    },
    {
      "type": "checkbox",
      "id": "show_country_selector",
      "label": "t:global.localization.show_country_region_selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_country_name",
      "label": "t:global.localization.show_country_name",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_country_flag",
      "label": "t:global.localization.show_country_flag",
      "default": true
    },
    {
      "type": "header",
      "content": "t:global.localization.language_selector_category",
      "info": "t:global.localization.language_selector_category_info"
    },
    {
      "type": "checkbox",
      "id": "show_locale_selector",
      "label": "t:global.localization.show_locale_selector",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.header.transparent_header_category"
    },
    {
      "type": "paragraph",
      "content": "t:sections.header.transparent_header_info"
    },
    {
      "type": "color",
      "id": "transparent_header_text_color",
      "label": "t:global.colors.text",
      "default": "#ffffff"
    },
    {
      "type": "image_picker",
      "id": "transparent_logo",
      "label": "t:sections.header.transparent_header_logo_image",
      "info": "t:sections.header.transparent_header_logo_size_recommendation"
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "t:sections.header.blocks.mega_menu.name",
      "settings": [
        {
          "type": "text",
          "id": "menu_item",
          "label": "t:sections.header.blocks.mega_menu.menu_item",
          "info": "t:sections.header.blocks.mega_menu.menu_item_info"
        },
        {
          "type": "select",
          "id": "images_position",
          "label": "t:sections.header.blocks.mega_menu.images_position",
          "options": [
            {
              "value": "left",
              "label": "t:global.position.left"
            },
            {
              "value": "right",
              "label": "t:global.position.right"
            }
          ],
          "default": "right"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.mega_menu.image_1"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "t:global.image.image",
          "info": "t:sections.header.blocks.mega_menu.image_size_recommendation"
        },
        {
          "type": "inline_richtext",
          "id": "image_1_heading",
          "label": "t:global.text.heading"
        },
        {
          "type": "inline_richtext",
          "id": "image_1_text",
          "label": "t:global.text.text"
        },
        {
          "type": "url",
          "id": "image_1_link",
          "label": "t:global.text.link"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.mega_menu.image_2"
        },
        {
          "type": "image_picker",
          "id": "image_2",
          "label": "t:global.image.image",
          "info": "t:sections.header.blocks.mega_menu.image_size_recommendation"
        },
        {
          "type": "inline_richtext",
          "id": "image_2_heading",
          "label": "t:global.text.heading"
        },
        {
          "type": "inline_richtext",
          "id": "image_2_text",
          "label": "t:global.text.text"
        },
        {
          "type": "url",
          "id": "image_2_link",
          "label": "t:global.text.link"
        }
      ]
    }
  ]
}
{% endschema %}
7

@Beorma can you please replace this line ?

to
8

Hi @Beorma ,

I checked and the theme supports this, you just need to go to Customize and upload the logo, it will display fine:

Screenshot.png
Screenshot.png692×1346 63.4 KB