How to make header sticky in WordPress?

There are several ways to make a header sticky in WordPress. The best method depends on your theme and whether you’re using a page builder.

Method 1: Using Theme Options (Recommended)

Many modern WordPress themes have a built-in sticky header option. Like below

• Appearance → Customize → Header
• Theme Options → Header
• Header Builder
• Customize → General → Header

Look for options like:

• ✅ Sticky Header
• ✅ Fixed Header
• ✅ Enable Sticky Navigation

No coding is required.

Method 2: CSS Only (Simple)

If your header already has an ID or class like #masthead or .site-header, add this CSS:

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
}

or

#masthead {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: white;
}

Add it under: Appearance → Customize → Additional CSS

Method 3: Fixed Header (Most Common)

.site-header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:#fff;
}

Since the header is removed from the normal document flow, add padding to the page so the content doesn’t hide underneath it:

body{
    padding-top:80px;
}

Replace 80px with your actual header height.

Method 4: Elementor

If using Elementor Pro:

1. Edit Header Template
2. Select the Header section
3. Go to

Advanced -> Motion Effects -> Sticky = Top

You can also choose:

• Desktop
• Tablet
• Mobile

Method 5: GeneratePress

Appearance -> Customize -> Layout -> Primary Navigation -> Sticky Navigation

Enable it.

Method 6: Astra

Appearance -> Customize -> Header Builder -> Primary Header -> Enable Sticky Header

Method 7: Block Themes (FSE)

Go to:

Appearance -> Editor -> Template Parts -> Header

Select the header Group block and, if your theme supports it, enable the Sticky position in the block settings.

Method 8: JavaScript Sticky on Scroll

If you want the header to become sticky only after scrolling:

CSS

.site-header{
    position:relative;
    transition:0.3s;
}

.site-header.sticky{
    position:fixed;
    top:0;
    width:100%;
    z-index:9999;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

window.addEventListener("scroll", function () {
    const header = document.querySelector(".site-header");

    if (window.scrollY > 100) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
});

Method 9: Plugin (No Code)

Popular plugins include:

• Sticky Menu (or Anything!)
• myStickymenu
• Sticky Header Effects for Elementor (Elementor)

These let you enable sticky behavior without editing code.