How to Add a Sticky Header or On-Scroll Fixed Header with Astra

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.