How to Create a Sticky Header in Astra + Elementor (Free Version, No Pro Needed)

If you’re using the free version of Elementor, you’ve probably already realized there’s no way to make your header sticky — which is probably why you’re here. Normally, you’d need Elementor Pro or a premium feature for this. In this post, I’ll show you how to do it using the free version of both Elementor and the Astra theme.

Astra’s header uses the .site-header class, so that’s the class we'll need to target with our CSS:

Paste this code into Appearance → Customize → Additional CSS.

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

Optionally, you can add a subtle box shadow to give the header a bit more depth. If your header is using a light background, try this:

.ast-primary-header-bar {
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

If your header uses a dark background color, this CSS will work better:

.ast-primary-header-bar {
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

Watch the tutorial on YouTube:

Watch Video (opens in a new tab)