What You’ll Need

• A website built with Elementor.
• Basic knowledge of adding custom CSS.

Step 1: Open the Elementor Editor

First, navigate to the page or template where you want to add this effect. Open it in the Elementor editor.

Step 2: Assign a Custom Class to Your Header

1. Select the header section you want to animate.
2. Go to the Advanced tab.
3. Under CSS Classes, add the class header-2.

Step 3: Add the Sticky Header Feature

1. With your header still selected, go to the Advanced tab.
2. Scroll down to the Motion Effects section.
3. Enable the Sticky option and set it to Top.
4. Choose the devices where you want this effect to apply (Desktop, Tablet, Mobile).

Step 4: Add Custom CSS

To achieve the slide-in effect, you’ll need to add the following CSS code. Navigate to Site Settings > Custom CSS (or use the Customizer if your theme supports it) and paste the following:

/* Slide In From The Top Option */

.header-2 {
    transform: translatey(-80px);
    -moz-transition: all .3s ease!important;
    -webkit-transition: all .3s ease!important;
    transition: all .3s ease!important;
    width: 100%!important;
}

.elementor-sticky--effects.header-2 {
    height: auto!important;
    transform: translatey(0px);
}

.elementor-sticky--effects.header-1 {
    display: none!important;
}

/* End Of Slide In From The Top Option */

Step 5: Save and Preview

1. Save your changes in Elementor and the Custom CSS section.
2. Preview your page to see the effect in action. Scroll down and up to watch your header slide in smoothly from the top.

Bonus: Customize the Animation

• To adjust the speed, change the 0.3s value in the transition property.
• Modify the -80px value in the transform: translatey property to adjust how far the header slides in.

Final Thoughts

This “Slide In From the Top” effect is a simple yet effective way to add flair to your website. It’s perfect for headers, navigation bars, or call-to-action elements that you want to keep in the spotlight.

If you found this tutorial helpful, check out more guides on enhancing your website’s design and functionality. And remember, if you need professional help with your website, I’m here to assist. Feel free to reach out through my website or email.

Happy designing!