Remove Site Title From One Section

Hi! 

Not sure if this is possible, but my client loves her homepage but feels as if her name being displayed twice (big and bold on the first section, then in the site title) is overkill. She's wondering if her site title can be hidden from the very first section only of her homepage only, and then appear like normal as you continue to scroll through the site? 

site: https://grouper-azalea-byr2.squarespace.com/

password: lara 

You can do this by using some JavaScript. The code below uses intersectionObserver to look if the first section is visible in the browser, and until its intersection the browser window, it keeps the class 'hidden' added to your logo. As soon as the section completely disappears from the browser visible area, it removes the 'hidden' css class from logo.

In the .hidden class I have added visibility:hidden. or if you prefer, you can use display:none. Try both.. let me know if it works.

<script>
const logo = document.getElementById('site-title'); 
const landingSection = document.getElementById('block-yui_3_17_2_1_1682011830342_7436'); 

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.target === landingSection) {
      if (!entry.isIntersecting && entry.intersectionRatio === 0) {
        logo.classList.remove('hidden'); 
      } else {
        logo.classList.add('hidden'); 
      }
    }
  });
});

observer.observe(firstSection); 
</script>

<style>
  .hidden {
    visibility: hidden;
  }
</style>

This shows the logo only once the first section is completely out of browser window. if you want it to display early, you need to tweak the intersectionRatio.

@Vicks holy crap, this worked perfectly! However, I only want this effect on the homepage, no other pages, is this possible?

where are you injecting this code? are you adding it to advanced > code injection panel ?

if you add a code block using add button in the homepage. I think it will only work on homepage.

OR

try changing the second line by this:

const landingSection = document.getElementById('block-yui_3_17_2_1_1682011830342_7436');

@Vicks I have the code in the footer code injection area.

I replaced the second line of the code with the new line you gave me, but the effect just disappeared all together. I could be deleting too much of the original l code? Or something? Would you mind rewriting the code with the new line added? Just to make sure I get it right 

10 minutes ago, kaydotjpg said:

@Vicks I have the code in the footer code injection area.

I replaced the second line of the code with the new line you gave me, but the effect just disappeared all together. I could be deleting too much of the original l code? Or something? Would you mind rewriting the code with the new line added? Just to make sure I get it right 

updated the original answer

Thanks Vicks! I just put that new code you provided into the footer code injection area. But dang, it still seems to be active on all pages as opposed to just the homepage. Take a look

https://grouper-azalea-byr2.squarespace.com/new-page-1

password: lara 

Hi @Vicks just checking in....

Hi, can you try instead of injecting the code in the footer. Use the Code block to inject it on the homepage only. Its the same place where you add a block on text, or image. There is an option "code" to inject code into only one page.