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

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.

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.

Quick Steps to Activate Sticky Header

You can follow the steps shared below to activate the sticky header on your website.

• Install and activate the Astra Pro Addon plugin. 
• Activate the Sticky Header module from Astra Dashboard in the WordPress Dashboard.
• Once the module is enabled, navigate to Customize > Header > Sticky Header. There, you can enable the sticky header on Primary, Above or Below headers and apply other options for the 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 > Sticky Header.

Sticky Header Settings 

Here are some of the Sticky Header settings that you can try out.

Enable Sticky Header for All Sections (Primary, Above & Below)

This is the setting that fixes your website’s primary, above and below header on the top. 

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.

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 > Primary Header or any other header from Above or Below, that color will automatically carry over to the sticky header. 

You can also apply a separate background color for the sticky header from the design tab of Primary, Above and Below headers. The background color also comes with the Background Blur. You can use this after adjusting the background color opacity

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 may appear for a sticky header. To remove the default shadow effect, add this custom CSS:

.main-header-bar.ast-sticky-active {
	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.