Jump to content

Remove Site Title From One Section

Recommended Posts

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 

Link to comment
  • Replies 8
  • Views 219
  • Created
  • Last Reply

Top Posters In This Topic

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.

Edited by Vicks
Link to comment

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');
Edited by Vicks
Link to comment

@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 

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

Link to comment

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.

Edited by Vicks
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.