Note: The Sticky Header feature is part of the Astra Pro Addon plugin. To use this feature, ensure that both the Astra theme and Astra Pro Addon are installed on your WordPress site.
Whatโs a Sticky Header?
The Sticky Header feature in Astra allows you to fix the header at the top of the webpage as users scroll, providing quick access to the menu.
It’s like having your menu always at your fingertips, no matter where you are on the page.
Quick Steps to Activate Sticky Header
You can refer to the video below to quickly get started with Sticky Header in Astra Pro.
- Install and activate the Astra Pro Addon plugin.
- Activate the Sticky Header module from Astra Options in the WordPress Dashboard.
- Customize the Sticky Header module settings in the WordPress Customizer under Appearance > Customize > Header Builder > Sticky Header.
For more details on this, please check out the following steps.
Activating the Sticky Header Module
- Activate the Sticky Header module from Astra > Dashboard.
- Access settings at Astra > Customize > Header Builder > Sticky Header.
Sticky Header Settings
Here are some of the Sticky Header settings that you can try out.
Stick Primary Header
This is the setting that fixes your websiteโs primary header on the top.
Stick Above and Below Header Sections
On your settings, there are two key areas โ the Above Header and the Below Header.
The Above Header is the upper section above the primary header where you can showcase buttons, menus, and additional content.
Below Header, which is just under the primary header, provides a space for extra menus, search bars, and widgets.
Note: Make sure that youโve activated the Header Sections module from the Astra Pro dashboard to see these options.
Change Sticky Logo & Width Options
Different Logo for Sticky Headers
This allows you to choose a different logo for your Sticky Header than your site logo. Leave this empty if you want to use the same logo as your site logo.
Add a Sticky Retina Logo
You can upload both regular and retina logos to make sure they look sharp on high-quality screens.
Sticky Logo Width
You can easily adjust these logo widths using this slider.
If you turn on the Colors and Background module in Astra Pro and choose a background color for the header at Astra > Customize > Header Builder > Sticky Header, that color will automatically carry over to the sticky header.
In this case, you can use the Sticky Background Opacity option to manage the opacity of the background color.
Add a Shrink Effect
Click on the Enable Shrink Effect option to use this feature. This shrinks the size of the sticky header for a more compact display while scrolling down.
It is useful when you have a primary header quite large in height and you want it to be smaller when converting to the sticky header.
Add Animation Effect
Applies animation effects to the sticky header entry.
Hide the Sticky Header While Scrolling Down
This option hides the sticky header only when the reader is scrolling down. While scrolling back upwards, the sticky header appears again.
This option must be enabled along with the Stick Primary Header option.
Display Options
Head over to the Enable On section to display the sticky header on a desktop, mobile, or both.
Customization with CSS
Note: By default, a shadow will appear for a sticky header. To remove the default shadow effect, add this custom CSS:
#ast-fixed-header .main-header-bar {
box-shadow: unset;
}Thatโs it! We hope this guide helped you.
If you have any more questions or face any issues, please reach out to us. Weโre always here to help.
