juless

UPDATE : I found a solution using @mferrini script ! : 

Hello, first of all, have you purchased a plan with squarespace ?

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...

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 😕

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...

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....

Hello, same here.
Have you found anything ? thx