How to Add a Sticky Header to the Astra Theme

Want to keep your Astra header visible as you scroll? Here’s how to create a sticky header the right way.

Method 1: Using Astra Pro (Easiest)

Astra Pro has a built-in Sticky Header module, making it the easiest way to add a sticky header without extra plugins or code.

Steps to Enable:

1. Install Astra Pro: Go to Plugins > Add New > Upload Plugin, then upload and activate the Astra Pro addon.
2. Activate the Sticky Header Module: Go to Appearance > Astra Options and enable the Sticky Header module.
3. Enable Sticky Header: Open Appearance > Customize > Header Builder, click on the Primary Header and toggle the sticky header feature.
4. Customize Options: Adjust colours, visibility, and scroll settings as needed.

This method offers the most flexibility and doesn’t require coding knowledge. You can also set sticky behaviour for desktop, mobile, or both.

✅ Best For: Astra Pro users who want a fast, simple, and reliable sticky header without additional plugins.

Method 2: Using Custom CSS (Free Option)

If you don’t have Astra Pro, you can still create a sticky header with some CSS.

Steps to Add a Sticky Header with CSS:

1. Open the WordPress Customizer: Go to Appearance > Customize > Additional CSS.
2. Add This Code:

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.site-content {
    padding-top: 100px; /* Adjust for header height */
}

3. Save & Publish: Click Publish to save your changes.

What This CSS Does:

• position: fixed makes the header stay visible.
• z-index ensures it stays on top of other elements.
• padding-top prevents content from being hidden under the header.

✅ Best For: Users comfortable with basic CSS who want a lightweight solution without Astra Pro.

Method 3: Using a Free Plugin (No Coding)

You can also use a free plugin to create a sticky header without touching CSS.

Steps to Set Up:

1. Install the Plugin: Go to Plugins > Add New and search for Sticky Menu & Sticky Header.
2. Activate and Configure:
   • Go to Settings > Sticky Header.
   • Enter the header selector: #masthead.
   • Enable sticky behaviour and save.

This plugin allows extra features like fade effects and different sticky modes, making it beginner-friendly but slightly heavier on your site performance.

✅ Best For: Beginners wanting a no-code sticky header without Astra Pro.

FAQs About Astra Sticky Headers

How Do I Remove the Sticky Header in Astra?

To remove a sticky header in Astra:

1. Go to Appearance > Customize > Header Builder.
2. Select the Primary Header.
3. Turn off the Sticky Header toggle.

If you’re using custom CSS, you can remove the sticky header by deleting the CSS code from the Additional CSS section. If you’re using a plugin, simply deactivate the plugin.

Disabling the sticky header can be helpful if you find it distracting for longer content pages where minimal distractions are preferred.

Is a Sticky Header Good for SEO?

A sticky header itself doesn’t directly impact SEO rankings. However, it can improve user experience (UX), which is an important SEO factor.

Here’s why:

• Better Navigation: Users can access menus without scrolling back to the top.
• Reduced Bounce Rate: Easier navigation can keep visitors on your site longer.
• Improved Mobile UX: Mobile users often expect headers to stay visible.

While sticky headers can be great, avoid making them too large since that can reduce visible content and harm UX.

Can I Make a Sticky Header for Mobile Only?

Yes, you can make a sticky header visible only on mobile devices using Astra Pro.

To do this:

1. Go to Appearance > Customize > Header Builder.
2. Select the Mobile Header section.
3. Toggle the Sticky Header option for mobile.

If you’re using custom CSS, you can target mobile devices specifically:

@media (max-width: 768px) {
    #masthead {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }
}

This setup is helpful when you want to prioritise navigation for mobile users while keeping the desktop layout clean.

Does Astra Support Sticky Headers Without Astra Pro?

No, Astra’s free version doesn’t have a built-in sticky header option. To get the feature natively, you’ll need Astra Pro.

However, you can still create a sticky header for free using:

• Custom CSS: Simple and lightweight.
• Plugins: Like Sticky Menu & Sticky Header.

Astra Pro is generally recommended since it’s the most seamless and performance-friendly option.

How Do I Adjust the Sticky Header Height?

The sticky header height can be controlled with CSS adjustments.

If you’re using CSS, adjust the padding in the .site-content section:

.site-content {
    padding-top: 120px; /* Adjust for taller headers */
}

In Astra Pro, you can adjust the height directly through the Header Builder in the WordPress Customizer.

A properly sized header keeps your content visible while maintaining easy access to your navigation links.

What’s the Best Astra Alternative for Sticky Headers?

If you’re exploring themes similar to Astra with sticky header options, consider:

• GeneratePress: Fast, lightweight, with sticky header options in GeneratePress Premium.
• Kadence Theme: Built-in sticky headers for both free and pro versions.
• OceanWP: Offers sticky headers in the premium version.

These themes also focus on speed and flexibility, similar to Astra.

Does a Sticky Header Slow Down My Site?

A sticky header by itself has minimal impact on speed when done with Astra Pro or CSS. However, using a plugin can slow things down slightly due to additional scripts running in the background.

To keep your site fast with a sticky header:

• Use Astra Pro or CSS where possible.
• Minimize plugin usage.
• Optimise images and enable caching.

The goal is to balance functionality with performance.