Changing Logos On Scroll In Elementor Headers

In just a few steps, I’ll show you a simple method for changing logos on scroll with Elementor.

1st Step: Add the Hide/Reveal Effect

In the last advanced headers for Elementor tutorial, I showed how to add the hide/reveal effect. Start by adding that effect by following the previous header tutorial here.

2nd Step: Add CSS Snippet

Add this CSS snippet to your Elementor site. My recommended method is to use a code management plugin like FluentSnippets or WP Codebox to keep your snippets organized and manageable.

/* Add classes logo-1 and logo 2 to your logos, logo-1 shows by default, logo-2 shows on scroll */
.logo-2 {
    display: none;
} 

.header-scrolled .logo-1 {
    display: none;
}

.header-scrolled .logo-2 {
    display: inline-block;
}

3rd Step: Add Classes to Your Logos

Add the class ‘logo-1’ to the first logo you want showing when the page loads.

logo-1

Add the class ‘logo-2’ to the second logo want to show on scroll.

logo-2

4th Step: Add JS Snippet

Next, add this JS snippet to create a class that only shows on scroll. This will allow us full control to target our styling to the entire header.

(() => {
  // ===== EDIT THIS VALUE =====
  const SCROLLED_AFTER_PX = 800; // keep this lower than the sticky trigger
  // ==========================

  const header = document.querySelector('.lytbox-header');
  if (!header) return;

  let isScrolled = false;

  const onScroll = () => {
    const shouldBeScrolled = window.scrollY >= SCROLLED_AFTER_PX;

    if (shouldBeScrolled !== isScrolled) {
      isScrolled = shouldBeScrolled;
      header.classList.toggle('header-scrolled', isScrolled);
    }
  };

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();

That’s it! It’s that simple.

Check Out the Video Tutorial

Want to see how it’s done? Check out the video below.