How to make header sticky in Astra theme free version in WordPress?

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

Since you’re using the Astra Free theme, the built-in Sticky Header feature is not available. It is an Astra Pro feature.

Simple way to make a header sticky in WordPress if you are using ASTRA theme (free version) with a small amount of CSS (and optionally JavaScript).

Option 1: Always Sticky Header (Recommended)

Go to: Appearance → Customize → Additional CSS

/* Sticky Header for Astra Free */

.ast-primary-header-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Prevent content from hiding behind header */
.site-content{
    padding-top: 90px;
}

If your header height is different, change to match your header height.

padding-top: 90px;

Option 2: Sticky Only After Scrolling (Looks More Professional)

.ast-primary-header-bar{
    position: relative;
    transition: all .3s ease;
}

.ast-primary-header-bar.sticky{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,.12);
}

body.header-sticky{
    padding-top:90px;
}

document.addEventListener("DOMContentLoaded", function () {
    const header = document.querySelector(".ast-primary-header-bar");

    window.addEventListener("scroll", function () {
        if (window.scrollY > 100) {
            header.classList.add("sticky");
            document.body.classList.add("header-sticky");
        } else {
            header.classList.remove("sticky");
            document.body.classList.remove("header-sticky");
        }
    });
});

If you have a plugin like Code Snippets or can add custom JavaScript, given in step 2

This gives the same behavior as many premium themes:

• Header is normal at the top.
• It becomes sticky after scrolling 100px.
• A subtle shadow appears.
• The page doesn’t jump.

Option 3: No-Code Plugin

If you don’t want to add CSS/JS, install a plugin named My Sticky Menu. It works well with Astra Free and lets you make the header sticky through its settings.