No results found. Try again with different words?

Search must be at least 3 characters.

Sticky Header – Blur background

Sidebar Image

Did not find a solution? We are here to help you succeed.

Want to enhance your website’s navigation experience with a modern sticky header?

Astra allows you to easily add a sticky header and elevate it further by applying a subtle blurred background effect.

Astra introduces this Background Blur option for a sticky header in v4.1.0 and above. This Background blur is dependent on the background color opacity. Let’s take a closer look at this feature.

Background Blur for Sticky Header

This is a premium feature available with the Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

The sticky header will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page. This feature allows the user to blur the header background.

Quick Steps on How to Add a Sticky Header or On-scroll Fixed Header with the Sticky Header Module
Step 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?
Step 2: Activate the Sticky Header module from the Astra Options under the Astra > Astra Pro Modules > Sticky Header
Step 3: Visit customizer [ Appearance > Customize > Header > Sticky Header ] to edit module settings

You can find the settings under Appearance > Customize > Header > Sticky Header.

Sticky Header Settings

Stick Primary Header option will stick the default theme header.

In case you have enabled the Header Sections Module from Astra Pro, you will see options to stick the Above and the Below header section.

Enabling Stick Above Header Section or Stick Below Header Section will stick the respective header section to the top of the page scroll.

If you stick the Primary header, navigate to the ‘Design’ tab of the Primary Header module to enable the Background Blur option.

Thus by following these steps, you can create a visually appealing and user-friendly experience with a sticky header and blurred background effect in Astra.

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form