In this tutorial by Riad Mahmud, we will explore creating Blur Sticky Header with Astra Pro using Astra Pro. This feature is a recent addition to Astra Pro and offers a unique aesthetic appeal to your website. It improves user navigation, making it easier for visitors to explore your site. But we won’t stop at just a sticky header. We’re going to take it a step further by adding a blur effect, a modern touch that adds depth and sophistication to your website’s aesthetics.
Steps to create a Blur Sticky Header with Astra Pro
- Navigate to the Astra Dashboard
From your WordPress dashboard, go to the Astra dashboard. - Enable the Sticky Header
Scroll down until you find the Sticky Header option and enable it. - Access the Customizer
Navigate to the customizer by clicking on “Customize”. - Go to the Header Builder
In the customizer, navigate to the Header Builder. - Access Sticky Header Options
Scroll down until you find the Sticky Header options. - Choose the Header to Stick
You can choose to stick above the header, stick as the primary header, or below the header. For this tutorial, we will stick to the primary header. - Set Sticky Header Preferences
You can choose a different logo for the sticky header, change the animation to slide or fade, and enable the sticky header for desktop and/or mobile devices. - Publish Changes
Click on “Publish” to save your changes. - Adjust Sticky Header Design
Go back to the primary header under the design tab and find the section called “Sticky Header Options”. - Enable Background Blur
Click on the “Background Blur” option to enable it. - Adjust Background Opacity
Change the background opacity to your liking. The blur effect depends on the background color opacity. - Publish Changes
Click on “Publish” to save your changes.
Why you should use a Blurred Sticky Header
Understanding how to create a Blur Sticky Header with Astra Pro can improve your website’s aesthetics. It not only adds a modern and sophisticated look to your site but also improves user navigation. A sticky header ensures that your site’s main navigation is always visible, making it easier for users to explore your site.
Moreover, the blur effect adds an extra layer of aesthetic appeal. It can make your website stand out from the crowd and leave a lasting impression on your visitors. This tutorial provides a simple and straightforward guide to implementing this feature.
Tips for Customizing Your Sticky Header
While the steps above guide you through creating a basic Blur Sticky Header with Astra Pro, there’s plenty of room for customization to make your sticky header truly unique. Here are some tips to help you personalize your sticky header:
- Choose Colors Wisely
The colors of your sticky header should align with your website’s overall color scheme. Consistency in color scheme enhances your website’s professional look and feel. - Adjust Opacity for Blur Effect
The blur effect’s visibility depends on the background color opacity. Experiment with different opacity levels to achieve the desired blur effect. - Select an Appropriate Logo
If you choose to use a different logo for the sticky header, ensure it’s clear and visible against the background color and blur effect. - Consider User Experience
Always keep user experience in mind when customizing your sticky header. It should enhance navigation, not distract or confuse your visitors.
Common Issues
- Sticky Header Not Displaying
Ensure that the Sticky Header option is enabled in the Astra dashboard. Also, check that you’ve selected the correct header to stick in the Sticky Header options. - Blur Effect Not Visible
The blur effect depends on the background color opacity. Make sure you’ve adjusted the opacity correctly under the Sticky Header Options in the design tab of the primary header. - Sticky Header Not Visible on Mobile Devices
In the Sticky Header preferences, ensure that the sticky header is enabled for mobile devices.
