Giới thiệu

When building a modern website, user experience is everything. Visitors expect clean layouts, fast loading times, and intuitive navigation. One small but powerful design trick that can dramatically improve usability is hiding the header when users scroll down—and revealing it again when they scroll up.

If you’re using Elementor on a WordPress website, you already have a flexible design system. But by default, Elementor doesn’t provide a simple toggle for scroll-based header behavior. That’s why many designers look for ways to implement this feature manually.

In this guide, we’ll explain how to hide header in Elementor WordPress, why it matters, and the different ways you can implement it—even if you’re not a developer.

What Does It Mean to Hide a Header on Scroll?

Before diving into the steps, it’s important to understand the concept.

A “hide on scroll” header is a navigation bar that:

• Disappears when the user scrolls down
• Reappears when the user scrolls up

This behavior helps reduce visual clutter and gives more space to content, especially on smaller screens.

Why Hide the Header in Elementor?

1. Improve User Focus

When users scroll through content, the header can become a distraction. Hiding it allows the content to take center stage.

2. Maximize Screen Space

This is especially useful on mobile devices, where screen space is limited.

3. Modern UX Design Trend

Many high-performing websites adopt this interaction pattern to create a smooth, app-like experience.

4. Better Content Engagement

By removing unnecessary elements during scrolling, users are more likely to stay engaged with your content.

Understanding Elementor Header Structure

In Elementor, headers are typically created using:

• Elementor Pro Theme Builder
• A header template assigned across pages

The header section is usually:

• Set as sticky
• Positioned at the top
• Visible at all times by default

To hide it dynamically, we need to add custom behavior using CSS and JavaScript.

Method 1: Using Custom CSS and JavaScript

This is the most common and flexible approach.

Step 1: Make the Header Sticky

In Elementor:

1. Edit your header template
2. Select the main section
3. Go to Advanced → Motion Effects
4. Set Sticky: Top

This ensures the header stays fixed before we add scroll behavior.

Step 2: Add a Custom CSS Class

Assign a class to your header section, for example:

header-hide

This class will be used to control visibility.

Step 3: Add CSS for Transition Effects

Add the following CSS to your site (via Customizer or Elementor Custom CSS):

.header-hide {
    transition: transform 0.3s ease-in-out;
}.header-hide.hide {
    transform: translateY(-100%);
}

What this does:

• Adds smooth animation
• Moves the header out of view when hidden

Step 4: Add JavaScript for Scroll Detection

Now we need logic to detect scroll direction.

Add this script to your site (via footer script or plugin):

let lastScrollTop = 0;
const header = document.querySelector('.header-hide');window.addEventListener('scroll', function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;    if (scrollTop > lastScrollTop) {
        // scrolling down
        header.classList.add('hide');
    } else {
        // scrolling up
        header.classList.remove('hide');
    }    lastScrollTop = scrollTop;
});

Cách thức hoạt động

• The script tracks scroll direction
• When scrolling down → adds .hide
• When scrolling up → removes .hide
• CSS handles the animation

Method 2: Using Elementor Pro with Custom Code

If you are using Elementor Pro, you can:

• Add JavaScript via Custom Code feature
• Apply CSS directly in the header template

This method avoids external plugins and keeps everything centralized.

Method 3: Using Plugins

If you prefer a no-code approach, some plugins can help.

Ví dụ bao gồm:

• Sticky Header Effects plugins
• Header animation plugins

However, keep in mind:

• Plugins may add extra weight
• Custom control is limited compared to manual coding

Best Practices for Hiding Headers

1. Keep Animation Smooth

Avoid abrupt movements. Use transitions between 0.3s–0.5s.

2. Ensure Accessibility

Make sure users can still easily access navigation when scrolling up.

3. Test on Mobile Devices

Mobile behavior should feel natural and responsive.

4. Avoid Conflicts

If you’re using other sticky or scroll scripts, test for conflicts.

Common Issues and Fixes

Header Not Hiding

• Check if the correct class is applied
• Ensure JavaScript is loaded properly

Animation Feels Laggy

• Optimize CSS transitions
• Avoid heavy scripts running simultaneously

Header Flickering

• Add a small scroll threshold to prevent constant toggling

Example improvement:

if (Math.abs(scrollTop - lastScrollTop) > 10) {
    // trigger only when meaningful scroll happens
}

Advanced Enhancements

Once you’ve implemented the basic version, you can improve it further.

1. Add Shadow on Scroll

.header-hide.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

2. Change Header Style Dynamically

You can modify:

• Background color
• Logo size
• Menu spacing

Based on scroll position.

When You Should Not Hide the Header

While this feature is useful, it’s not always appropriate.

Avoid it when:

• Your site relies heavily on navigation
• Users need constant access to menus
• Your audience prefers traditional layouts

Real-World Use Cases

This technique is commonly used in:

• SaaS landing pages
• Portfolio websites
• E-commerce stores
• Blogs with long-form content

It helps create a more immersive browsing experience.

Performance Considerations

• Keep JavaScript lightweight
• Avoid unnecessary DOM queries
• Test performance with tools

Efficient code ensures smooth scrolling and better user experience.

Phần kết luận

Learning how to hide header in Elementor WordPress is a simple yet powerful way to improve your website’s usability and design. By combining Elementor’s sticky header feature with custom CSS and JavaScript, you can create a smooth, modern scrolling experience that keeps users focused on your content.

Whether you choose a manual coding approach or a plugin-based solution, the key is to ensure smooth behavior, responsiveness, and usability across devices. With the right implementation, this small interaction can make a big difference in how your website feels and performs.

Câu hỏi thường gặp