How to Change Header on Scroll in Elementor: Step-by-Step Tutorial

Want to show a different header when visitors scroll down your WordPress website?

In this tutorial, I’ll show you how to create two different headers inside a single Elementor Header template. The first header is displayed normally when visitors open your website. When they scroll down, a second header smoothly appears from the top.

You can use this technique to create a completely different sticky header with a different logo, menu, colors, buttons, or layout.

What We’re Going to Build

Our final setup will have a normal header and a different sticky header. The important part is that we are not creating two separate Header templates. Both headers will exist inside one Elementor Header template.

What You Need

• WordPress
• Elementor
• Elementor Theme Builder
• Elementor Custom Code
• Basic CSS
• Basic JavaScript

No additional sticky-header plugin is required for this method.

Step 1: Create Your Header Template

Log in to your WordPress dashboard and go to Templates → Theme Builder → Header. Create a new Header template. This will be the only Header template we need.

Step 2: Create the Normal Header

Open the Header template with Elementor. Add a parent container for your header. Inside the parent container, create three child containers, for example: Logo, Navigation Menu, and Social Icons.

Header Parent Container
├── Logo
├── Menu
└── Social Icons

Design your normal header exactly how you want it. This is the header visitors will see when they first open the website.

Step 3: Duplicate the Parent Container

Do not create another Header template. Select the parent container of your normal header and duplicate it. You will now have two parent containers inside the same Header template.

ONE HEADER TEMPLATE
├── Parent Container 1
│   ├── Logo
│   ├── Menu
│   └── Social Icons
└── Parent Container 2
    ├── Logo
    ├── Menu
    └── Social Icons

The first parent container remains your normal header. The duplicated parent container becomes your sticky header.

Step 4: Design Your Second Header

Customize the duplicated parent container. You can change the logo, menu, background color, navigation spacing, social icons, buttons, header height, and typography. The goal is to give visitors a different header when they scroll.

Step 5: Add an ID to the Sticky Header

Select the duplicated parent container and go to Advanced → CSS ID. For the desktop sticky header, use:

menuhopin

Do not add # inside the Elementor CSS ID field.

If you are using a separate mobile/tablet sticky header, use:

menuopenmobile

Step 6: Add the CSS

<style>
/* Elementor Menu Fix */
.elementor-nav-menu__container {
    top: 0px !important;
}

/* Base styling for BOTH Desktop and Mobile/Tablet headers */
#menuhopin {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9999;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    transform: translateY(-200px); /* Adjust this if mobile header is taller than 200px */
    will-change: transform;
}
	
 
#menuopenmobile {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9999;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    transform: translateY(-200px); /* Adjust this if mobile header is taller than 200px */
    will-change: transform;
}	

/* The Reveal State for BOTH headers */
#menuhopin.headershow, 
#menuopenmobile.headershow {
    transform: translateY(0);
}
</style>

What Does This CSS Do?

The second header starts above the visible screen using transform: translateY(-200px). The transition makes the movement smooth. When JavaScript adds the headershow class, the header moves to translateY(0) and becomes visible.

Step 7: Add the JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select both headers
    const menuhopin = document.getElementById('menuhopin');
    const menuopenmobile = document.getElementById('menuopenmobile');
    
    // Only run scroll listener if at least one header exists on the page
    if (menuhopin || menuopenmobile) {
        document.addEventListener('scroll', function() {
            let scrollPosition = window.scrollY;

            // Handle Desktop Header (if it exists)
            if (menuhopin) {
                if (scrollPosition > 150) { 
                    menuhopin.classList.add('headershow');
                } else {
                    menuhopin.classList.remove('headershow');
                }
            }

            // Handle Mobile/Tablet Header (if it exists)
            if (menuopenmobile) {
                if (scrollPosition > 150) { 
                    menuopenmobile.classList.add('headershow');
                } else {
                    menuopenmobile.classList.remove('headershow');
                }
            }
        });
    }
});
</script>

How the JavaScript Works

The script checks the visitor’s scroll position using window.scrollY. When the visitor scrolls more than 150 pixels, JavaScript adds the headershow class to the sticky header. The CSS then moves the header into view.

When the visitor scrolls back above 150 pixels, the class is removed and the sticky header moves back up.

Step 8: Test Your Header

Open your website on the frontend. At the top of the page, you should see your normal header. Start scrolling down. After approximately 150px, your second header should slide down from the top. Scroll back to the top and the second header should disappear again.

Step 9: Test Mobile and Tablet

Test the header on desktop, tablet, and mobile. If your mobile header has a different height, you may need to adjust the negative translate value. For example:

transform: translateY(-250px);

The value should be large enough to completely hide the header above the screen.

Common Problems

The sticky header appears immediately

Check that the second parent container has the correct CSS ID, such as menuhopin, and make sure the CSS is loading correctly.

The sticky header doesn’t appear

Check that the ID in Elementor exactly matches the ID used in JavaScript. Even a small spelling difference can prevent the script from finding the element.

The header isn’t completely hidden

Increase the negative translate value if the header is taller than 200px.

The header appears behind other elements

Make sure the header has a sufficiently high z-index, such as 9999.

Why Use Two Headers?

The biggest advantage of this method is design flexibility. Instead of taking the same header and simply changing its background color when the visitor scrolls, you can create an entirely different design.

Frequently Asked Questions

Can I create two headers in one Elementor template?

Yes. You can create one Header template and place two parent containers inside it. The first container acts as the normal header and the second becomes the sticky header.

Do I need two Elementor Header templates?

No. This method uses one Elementor Header template containing both header containers.

Can the second header have a completely different design?

Yes. You can change its logo, menu, colors, spacing, buttons, icons, and layout.

Can I change when the sticky header appears?

Yes. The JavaScript currently uses 150 pixels. You can increase or decrease that value depending on when you want the sticky header to appear.

Do I need another WordPress plugin?

No. This particular method uses Elementor together with custom CSS and JavaScript.

Conclusion

Creating a different header on scroll in Elementor doesn’t require two separate Header templates. With one Elementor Header template, two parent containers, unique IDs, custom CSS, and JavaScript, you can create a completely different header that smoothly appears when visitors scroll.