Sticky Header Background Color

This doc covers the background color and blue for the Sticky Header in Astra Pro. This is a premium feature and requires Astra Pro Addon plugin installed with Sticky Header module enabled on the website. If you have not done that, please review this guide to add the Sticky Header or On-Scroll Fixed Header 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.

You can click on Customize under Sticky Header module or navigate to Appearance > Customize > Header > Sticky Header to find the Sticky Header settings.

Sticky Header Background Color

The sticky header in Astra Pro allows you to specify a separate color for the sticky header. This is helpful when you want to show a different background color for the header while scrolling. It requires enabling the Sticky Header on any of the headers (Primary, Above and Below) first and then you can change the background color from the header settings.

If you have a sticky primary header, you can change the Sticky Header background color from the Primary Header design options. Similarly, if the sticky header is enabled for the Above or Below header, you can change the background color from Above or Below header deign options.

To find these, navigate to Customize > Header > Select the Header Settings (Primary, Above or Below) > Design > Sticky Header Option. Check the screencast shared below to understand how it works.

Sticky Header Background Blur

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.

Once you enable the sticky header on any of the headers, navigate to design tab to find sticky header option, there you will see the Background Blur option right below the background color option.

If you have enabled the sticky header for Primary Header, you will find the option in the Design Tab of the Primary Header and so on.

The background blue will work fine when the opacity of the sticky header background color is reduced. So, make sure to use the opacity selector to reduce the background color opacity for the sticky header.

Once the opacity is reduced, you can enable the background blur. It also allows you to select the blur intensity in the range of 1-20. 1 being the lowest blur and 20 being maximum blur.

This way, you can apply background blur to the sticky header on your website. Applying background color and blur effect for the sticky header is helpful to elevate the sticky header effect.

The sticky header background color also comes handy when you’re using a transparent header on the website. In this case, if the sticky header is also transparent, the menu text may appear crumbled with the page content and a separate background color for the sticky header prevents that.

Sticky Header FAQs

I have enabled background blur but do not see any change in the background?

If the background blue is enabled and still the blur effect does not work, please make sure to reduce the opacity of the background color for the sticky header. It is important to change the opacity of the sticky header background color for the blur effect to work.

The header appears transparent when I scroll down. How do I fix it?

If the header appears transparent while scrolling, it means you are on a page with transparent header enabled and the same transparency is applied to the sticky header. To resolve this, simply apply background color to the sticky header by selecting the header settings and switch to the design tab.

We hope the above information has been helpful. If you still face any issues with the Sticky Header configuration, please feel free to reach out to our support team.