how to make logo large in the hero, then as you scroll, it shrinks and remains in the navigation bar

I came across this website on another forum and noticed their logo starts large in the hero section, then shrinks and stays in the navigation bar as you scroll. How can I achieve the same effect for my logo?

Try this:

I tried every CSS code given in that thread, and they all keep the logo very large and it doesn't shrink then remain in the nav as when you scroll down the page.

add the below code into custom css:

header-title-logo a img {
  transition: all 0.3s ease; /* Smooth transition for resizing */
  width: 150px; /* Large logo size for hero */
  height: auto;
}

header-title-logo.shrink a img {
  width: 50px; /* Smaller size for navbar */
  height: auto;
}

header.shrunk {
  padding: 10px 20px; /* Smaller padding when scrolled */
  background-color: rgba(255, 255, 255, 0.9); /* Optional: transparent background */
}

add the below code into pages > web tools > code injection > footer:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Select the logo and the header
    const logo = document.querySelector('header-title-logo');
    const header = document.querySelector('header');

    // Function to handle scroll and apply/remove classes
    function handleScroll() {
      if (window.scrollY > 100) { // Adjust this threshold if needed
        logo.classList.add('shrink');  // Add 'shrink' class to the logo
        header.classList.add('shrunk'); // Optional: add a class to the header to modify styles
      } else {
        logo.classList.remove('shrink');  // Remove the 'shrink' class when scrolled up
        header.classList.remove('shrunk'); // Optional: reset header styles
      }
    }

    // Run the function on page load
    handleScroll();

    // Listen for scroll events
    window.addEventListener('scroll', handleScroll);
  });
</script>

7 hours ago, Squareko said:

header-title-logo a img {
  transition: all 0.3s ease; /* Smooth transition for resizing */
  width: 150px; /* Large logo size for hero */
  height: auto;
}

header-title-logo.shrink a img {
  width: 50px; /* Smaller size for navbar */
  height: auto;
}

header.shrunk {
  padding: 10px 20px; /* Smaller padding when scrolled */
  background-color: rgba(255, 255, 255, 0.9); /* Optional: transparent background */
}

This didn't work either 😕 the logo didn't change after applying both the codes above. I really appreciate your help though. Is there anything else you think would be helpful to try or settings I should check?

On 11/21/2024 at 1:01 AM, Squareko said:

header-title-logo a img {
  transition: all 0.3s ease; /* Smooth transition for resizing */
  width: 150px; /* Large logo size for hero */
  height: auto;
}

header-title-logo.shrink a img {
  width: 50px; /* Smaller size for navbar */
  height: auto;
}

header.shrunk {
  padding: 10px 20px; /* Smaller padding when scrolled */
  background-color: rgba(255, 255, 255, 0.9); /* Optional: transparent background */
}

@Ziggy I switched my header to 'fixed' and it works! Now the issue is:

1) It doesn't work on mobile. Is there CSS for mobile version?

2) Is there a way to do this when the header is not 'fixed'?

3) How do I have this only on the homepage?

4) [EDIT I may have fixed this one] When I change the screen size, the logo/header size doesn't adapt - for example, when I make the screen smaller, the logo goes down into the next section on the page.

On 11/23/2024 at 12:22 PM, StaceyArenson said:

I switched my header to 'fixed' and it works! Now the issue is:

1) It doesn't work on mobile. Is there CSS for mobile version?

2) Is there a way to do this when the header is not 'fixed'?

3) How do I have this only on the homepage?

4) [EDIT I may have fixed this one] When I change the screen size, the logo/header size doesn't adapt - for example, when I make the screen smaller, the logo goes down into the next section on the page.

There is a typo here

shrink