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.
