Jump to content

Logo not changing when using anchor

Go to solution Solved by juless,

Recommended Posts

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

IMG_1773.PNG

Link to comment
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....

IMG_1773.PNG

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.

image.thumb.png.ea4569d9e4117bbb72c77f756d677be6.png

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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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...

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 😕

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.