How To Fix Astra Sticky Header In Free & Pro Version?

Do you want to make your Astra sticky header so that it remains visible while visitors scroll through your website?

Whether you’re using the Astra Free theme or Astra Pro, creating a sticky header is easier than you might think. In this guide, I’ll explain all possible methods like using custom CSS, Astra Pro’s built-in Sticky Header feature, and a plugin if you prefer a no-code solution.

After testing these methods on multiple WordPress websites using both the Block Editor (Gutenberg) and Elementor, I found that each approach works well for different use cases.

Astra Pro offers the easiest and most customizable experience, while Astra Free users can still achieve a sticky navigation menu using CSS or a lightweight plugin.

In this tutorial, you’ll learn:

How to create a sticky header in Astra Free?
How to enable the Sticky Header feature in Astra Pro?
How to make a sticky menu without writing code?
How to fix common sticky header issues?
Which method is best for your website?

Quick Recommendation: If you’re building a business website or blog, Astra Pro is the easiest way to create a professional sticky header with scroll effects, sticky logos, and mobile controls without writing CSS code.

To Design A Sticky Header Using The Astra Theme Easily, Get Its Premium Version Now!

Check Astra Theme Discount

Let’s get into the details!

Disclosure: We get a commission when you buy a product via our affiliate link at no additional cost.

Table Of Contents

What Is an Astra Sticky Header?
Why Should You Use a Sticky Header?
1. How To Add a Sticky Header in Astra Free?
2. How To Add a Sticky Header in Astra Pro Version?

What Is an Astra Sticky Header?

A sticky header (also called a fixed header or sticky navigation menu) stays at the top of the screen when you readers scroll down a webpage.

Instead of disappearing, your website’s navigation menu remains visible, making it easier for visitors to access important pages from anywhere on your site.

For example, if someone is reading a long blog post, they don’t have to scroll back to the top to visit your About page, Contact page, or Services page, or whatever you add in the navigation menu; it is always available.

Why Should You Use a Sticky Header?

A sticky header isn’t just a visual feature! It can improve how visitors interact with your website. Here are some of its benefits:

Better User Experience – Visitors can navigate your website without constantly scrolling back to the top.

Higher Engagement – Keeping your navigation visible encourages users to explore more pages, products, or services.

Faster Navigation – On larger websites with multiple categories, a sticky menu helps users reach any section quickly.

Improved Mobile Usability – Since mobile screens are smaller, having an always-visible navigation bar makes browsing much easier.

Better Conversion Opportunities – You can keep important buttons such as Contact Us, Buy Now, Book Appointment, and Free Trial visible throughout the visitor’s journey.

My Experience: I enabled this feature on one of my content websites to make the navigation smoother for readers browsing long tutorials. It noticeably improved the overall user experience, especially on mobile devices.

1. How To Add a Sticky Header in Astra Free?

The free Astra theme has no settings to enable the sticky header. Follow the steps below to include the CSS code.

Step 1: Go to your WordPress Dashboard > Customize

Step 2: Click the “Additional CSS” section

Step 3: Add the following CSS code in that section.

.site-header {

    position: fixed;

    width: 100%;

}

.site-content {

    padding-top: 75px;

}

Step 4: Click the “Publish” button after adding the code. That’s it! You have fixed the floating header in the free version.

2. How To Add a Sticky Header in Astra Pro Version?

I assume that you installed the Astra Pro plugin to fix the On-scroll fixed header. Now, follow the steps!

Step 1: Click “Dashboard” under Astra options in the WordPress Dashboard. Enable the Sticky Header option (shown below).

Step 2: Go to Customize (Under Astra Settings) and click “Header Builder.”

Step 3: Click “Sticky Header.”

Step 4: You must enable the “Sticky Primary Header” and click the “Publish” button.

In the screenshot above, you can see the other settings to improve the Astra sticky header. Let me explain them.

Stick Above Header – This section is just above your primary header for buttons, special content, or menus.

Stick Below Header – It is the space to add extra menus

Enable Shrink Effect – If you have a large primary header and want to shrink its size while scrolling as a stick header, use this option.

Hide When Scrolling Down – Hides the Astra sticky header as your readers scroll down the page. When they scroll back, the header will be displayed. This feature will work only when the “Stick Primary Header” option is enabled.

Different Logo for Sticky Header – You may add a different logo for your sticky header instead of your site logo by uploading a new one. Here, you can further add

Different Logo for Retina devices
Sticky Logo Width

If you want to add some effect to your sticky header, select the Slide or Fade option. Besides, enabling it for particular devices like desktops, mobile phones, or both is possible.

Common Astra Sticky Header Problems (Solved)

Even after enabling a sticky header, you may run into a few issues. Here are the most common problems and their solutions.

1. Sticky Header Is Not Working

If the sticky header doesn’t appear:

Make sure you’ve enabled the Sticky Header feature correctly.
Clear your WordPress cache.
Purge your CDN cache if you’re using Cloudflare or another caching service.
Temporarily disable optimization plugins to check for conflicts.
Update Astra Theme and Astra Pro to the latest versions.

2. Header Covers the Page Content
This usually happens when using the CSS method. Increase the top padding of your content so it sits below the fixed header.

.site-content{
padding-top:90px;
}

Adjust the value based on your header height.

3. Sticky Header Doesn’t Work on Mobile

Check whether the sticky header is enabled for mobile devices. In Astra Pro, you can choose exactly which devices should display the sticky header. Also, clear your browser cache and test on a real mobile device instead of relying solely on browser emulation.

4. Transparent Header Stops Working

If you’re using Astra’s Transparent Header feature, adding custom CSS may interfere with it. The best solution is to use Astra Pro’s native Sticky Header settings, which are designed to work with Transparent Headers without additional tweaks.

5. Sticky Header Changes Color Unexpectedly

Sometimes the sticky header inherits different background or text colors while scrolling. You can fix this by customizing the Sticky Header colors in the Header Builder (Astra Pro) or by adding custom CSS to define a consistent background and text color.

6. Sticky Header Doesn’t Work with Elementor

If you’re using Elementor, avoid creating two sticky headers, one with Astra and another with Elementor. Having multiple sticky headers can cause layout conflicts, duplicate menus, or unexpected scrolling behavior. Use either Astra’s Sticky Header or Elementor’s sticky feature, but not both at the same time.

What are the questions frequently asked?

Are Sticky Headers Good or Bad?

The sticky header is always visible to your readers. When you offer valuable data in the site menu, it gently pushes your readers to check the details you provide. This activity lowers your site bounce rate, which is good for SEO.

Can I Use Astra Sticky Header with Elementor?

Yes! Astra works well with Elementor, but it’s recommended to use only one sticky header solution. If you’re using Astra Pro, create the sticky header through Astra.
If you’re building a fully custom header in Elementor Pro, use Elementor’s sticky settings instead. Running both simultaneously can lead to duplicate headers or styling conflicts.

Does a Sticky Header Affect Website Speed?

The Sticky Header feature itself has a minimal impact on performance. Using Astra Pro’s built-in functionality is generally more efficient than relying on multiple third-party plugins.
If you use a plugin, choose a lightweight option and avoid installing several plugins with overlapping features.

What is My Conclusion about making an Astra Sticky Header?

Astra is a top page builder theme for WordPress. The sticky header is available in its Pro version! You should check the Astra Free vs Pro comparison to understand the premium features of this highly customizable theme.

When using the free theme version, you can either add the corresponding CSS code (as Given in the above tutorial) or use the Elementor Pro plugin to enable the sticky header feature.

However, I recommend the paid version of the Astra theme to complete the job in 1 click. As you can see, the Astra sticky header settings offer impressive options to create an attractive floating header that expedites user navigation.