hidden header logo that appears when scrolling

On 1/23/2024 at 9:51 AM, tuanphan said:

You mean

Make logo invisible on first section

and make it visible on other sections on current page?

 

Hi @tuanphan Yes, exactly. Let me know if it's possible. 

Thank you! 

Hi! This page has been very helpful. I have used the following code for my site logo so that it disappears at the top of the homepage and smoothly appears while scrolling down the page. I am trying to keep this effect only on the site's homepage, and keep the logo visible at the top of every other page, but it seems that this effect has been applied to all of my other header navigation pages. Any advice for making the code work so that the site logo ONLY has the disappear/reappear scrolling affect onto the home page? Thanks so much!!

.homepage .header-title-logo header#header:not(.shrink) .header-title-logo {
    visibility: hidden;
}
.homepage.header-title-logo {
  opacity: 0;
  position: relative;
  top: -10vh;  
  transition: all 0.25s; 
}
.homepage.shrink .header-title-logo {
  opacity: 1;
  position: relative;
  top: 0;  
}

On 11/9/2024 at 6:14 AM, kk589 said:

Hi! This page has been very helpful. I have used the following code for my site logo so that it disappears at the top of the homepage and smoothly appears while scrolling down the page. I am trying to keep this effect only on the site's homepage, and keep the logo visible at the top of every other page, but it seems that this effect has been applied to all of my other header navigation pages. Any advice for making the code work so that the site logo ONLY has the disappear/reappear scrolling affect onto the home page? Thanks so much!!

.homepage .header-title-logo header#header:not(.shrink) .header-title-logo {
    visibility: hidden;
}
.homepage.header-title-logo {
  opacity: 0;
  position: relative;
  top: -10vh;  
  transition: all 0.25s; 
}
.homepage.shrink .header-title-logo {
  opacity: 1;
  position: relative;
  top: 0;  
}

Need a space here