Logo not changing when using anchor

Hello ! 

I'm developping this website : www.binomes.org and i added a css snippet that changes the logo when scrolling :

.shrink .header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/663120e8376c903e4375ddd0/t/663c86de50f6642bae295add/1715242718812/logo+binomes+2.png);
    background-size: contain;
    background-repeat: no-repeat;
  margin-top : 2%;
}

The problem is : when i use the menu to go to an anchor point i set up on the page, i end up with the wrong logo, which creates an ugly overcrossing (especially on mobile), could anyone help me ? @tuanphan

Also my header is transparent which does not help....

1 hour ago, juless said:

Hello ! 

I'm developping this website : www.binomes.org and i added a css snippet that changes the logo when scrolling :

.shrink .header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/663120e8376c903e4375ddd0/t/663c86de50f6642bae295add/1715242718812/logo+binomes+2.png);
    background-size: contain;
    background-repeat: no-repeat;
  margin-top : 2%;
}

The problem is : when i use the menu to go to an anchor point i set up on the page, i end up with the wrong logo, which creates an ugly overcrossing (especially on mobile), could anyone help me ? @tuanphan

 

Also my header is transparent which does not help....

Your CSS code only works when the Dom element of the header adds the class shrink. I figured out that when you use anchor link, the viewpoint move to your link position. Howerver, the header is still not updated with shrink class.

If you insist on this effect, I think we need some additional javascript to get through it

19 hours ago, Beyondspace said:

If you insist on this effect, I think we need some additional javascript to get through it

@Beyondspace Thank you for your answer! and yes i have no choice..
Can't i just detect when i use an anchor point ? I have no idea how to use javascript to fix this...

On 5/15/2024 at 7:33 PM, juless said:

@Beyondspace Thank you for your answer! and yes i have no choice..
Can't i just detect when i use an anchor point ? I have no idea how to use javascript to fix this...

You can try adding to Code injection (Footer) with the following code

<script>
  (function(){
    document.addEventListener("DOMContentLoaded", () => {
      const heightPos = window.scrollY;
      if(heightPos > 200) {
        const header = document.querySelector('#header');
        if(header) {
          header.classList.add('shrink');
        }
      }
    });
  })()
</script>

Let me know how it works on your site

12 hours ago, Beyondspace said:

You can try adding to Code injection (Footer) with the following code

<script>
  (function(){
    document.addEventListener("DOMContentLoaded", () => {
      const heightPos = window.scrollY;
      if(heightPos > 200) {
        const header = document.querySelector('#header');
        if(header) {
          header.classList.add('shrink');
        }
      }
    });
  })()
</script>

Let me know how it works on your site

Thank you for your answer @Beyondspace but it still not working 😕

I turned the logo in a jpeg to make it more accessible but it's even worse with the header not showing when i click on one of the anchor...