How to change logo when scrolling down (Dawn Theme 10.0).

[skinnystick]

I am using Dawn Theme 10.0.0.

As I have a transparent header, I would like to use a different logo/ white logo when I scroll down on the webpage. The default logo is a black logo.

Thank you

[BSS-Commerce]

Hi @skinnystick ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[skinnystick]

Hi, the link is https://skinnyartspace.com/.

thank you

[BSS-Commerce]

Hi @skinnystick,

- You can find the header bar display in the customize theme section and replace the logo with the image you want

- If you cannot find it, you can follow the steps below:

theme -> edit code -> Layout -> theme.liquid -> copy this code at the end of the file

<script>
  let interval;
  interval = setInterval(() => {
      const targetElement = document.querySelector('.header__heading-logo-wrapper');
      if (targetElement) {
          clearInterval(interval)
          const imgHTML = '<img src="your_url_img" width="100" height="65.21739130434783" loading="eager" class="header__heading-logo" sizes="(min-width: 750px) 100px, 50vw">';
          targetElement.innerHTML = imgHTML;
      }
  }, 200);
  setTimeout(() => {
      clearInterval(interval)
  }, 3000)
</script>

Then replace your_url_img with the path to the image logo you want

Hope it helps @skinnystick 

[skinnystick]

Hi, 

thank you, but when I scroll to a white page, the white logo will be camouflaged.

I want it to change into a black logo when I scroll/ leave the transparent header.

[BSS-Commerce]

Hey @skinnystick ,

Please add this code to Edit code -> Layout -> assets -> base.css

.header__inline-menu span,.header__inline-menu svg, .header__icons.header-localization svg  {
    color: #ffffff
}
sticky-header.header-wrapper {
    background-color: transparent;
}

[skinnystick]

Hi, it doesn't work too. What I want is the logo to look white on the transparent header, but it is still black on the remaining pages. Something like this