hide Sitetittle on a row

[anagase]

Hello guys! Any idea how to hide the logo in a row, inside a page? Any options? Here’s an example: https://orbital.anagarciasegura.com/ I would like the logo not to appear initially, unless it’s as a logo. I’ve tried making it sticky in the second row, but then I can’t keep it in the following ones. Any ideas?
Thanks!!!!

[arminunruh]

ah it is a lay theme site! so basically, this is the page where you would like the logo to not appear?

I would like the logo not to appear initially, unless it’s as a logo

I don't understand what you mean with that :(

do you mean the logo should only appear, once we are scrolled to this position?

ok you can do it like this:

in lay options -> custom css & html -> custom head content, insert:

<script>
window.laytheme.on('newpageshown', function() {
  // CONFIGURATION: Change the class selector here
  const targetSelector = '.showlogo'; 
  const titleSelector = '.sitetitle';

  const siteTitle = document.querySelector(titleSelector);
  const triggerElement = document.querySelector(targetSelector);

  // If the trigger class doesn't exist on this page, show the logo by default
  if (!triggerElement) {
    if (siteTitle) siteTitle.style.opacity = '1';
    return; 
  }

  // Initial state for pages that DO have the trigger element
  if (siteTitle) siteTitle.style.opacity = '0';

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // Logic: If the trigger element is NOT intersecting the top edge 
      // AND its position is at or above 0, it has scrolled past the top.
      if (!entry.isIntersecting && entry.boundingClientRect.top <= 0) {
        siteTitle.style.opacity = '1';
      } else {
        siteTitle.style.opacity = '0';
      }
    });
  }, {
    threshold: 0,
    rootMargin: '0px 0px -100% 0px' 
  });

  observer.observe(triggerElement);
});
</script>

in the gridder, on the first row where you want your logo to show up, right click the row, click "set html class and id" and as HTML class set:

showlogo

you may want to use this css also in lay options -> custom css for desktop:

.sitetitle {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

gemini link to explore the code further:

https://gemini.google.com/app/d8b1498755f9003f

Please understand i could have written this code myself, but it just helps to use AI so i can answer things faster

if it doesnt work:
Can you please send:

• a link to this forum topic
• your website address
• /wp-admin/ username and password
  to: info@laytheme.com

[anagase]

thanks a lot Armin! at the end I used this code:

[anagase]

<script>
window.laytheme.on('newpageshown', function() {
const logo = document.querySelector('.sitetitle');
const trigger = document.querySelector('.showlogo');

if (!logo) return;

if (!trigger) {
logo.style.opacity = '1';
return;
}

logo.style.opacity = '0';

function toggleLogo() {
const triggerTop = trigger.getBoundingClientRect().top;
logo.style.opacity = triggerTop <= 0 ? '1' : '0';
}

toggleLogo();
window.addEventListener('scroll', toggleLogo);
});
</script>

[anagase]

Thanks anyway… you helped me a lot. You’re a rockstar — I really appreciate the speed and the interest you show on the forum

[arminunruh]

thanks a lot! <3

im glad i could help!