In this article, I’ll show you how to create a sticky header using Astra. To do this you’ll need to get the Astra Pro; an add-on on the free version of Astra which brings a bunch of other exciting features for you to use.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Create a Sticky Header Using Astra Theme

Enbale Sticky Header Options

If you have your Astra Pro already installed, go to your dashboard > Astra Options, here you’ll find the Sticky header option, activate it (00:34).

After activating your sticky header, go to Appearance > Customize to open up your WordPress customizer.

In the Header section, go to Sticky Header (00:53), here you can make your primary header sticky, you can choose a different logo for your sticky header, and a couple of other options.

When you uncheck the sticky primary header option you’ll realize that on scroll it is not sticky anymore.

You also have an option to change your logo or even remove it.  

To Read: How To Create A Transparent Header in WordPress using Astra Theme

Change Logo when Header Turns Sticky

By default, my sticky header is displaying the non-sticky logo, which is white so if I scroll it will not be visible because the header background is white (01:30)

To make the header visible, go to the Change Image option then choose a logo with a different color from the media library (00:53)

Set the Sticky Logo Width to 120, you can also enable the shrink effect on your logo or you can hide it on scroll down; so that when you scroll down the logo disappears, and when you scroll back up it reappears.

You can also add an animation to your header, for example, you can set it to fade or slide in.

On the Enable on option, you can set up your header to be sticky on mobile devices only, desktop only, or on both devices.

Under the Primary Header Colors option, you can style your header color to your preference.

When you’re done with all your edits hit the Publish button then reload and preview your changes.

Also Read: How to Create a Top Header and Below Header using Astra

In closing

That’s how you can use a sticky header on your website using Astra Pro.

If you have any questions or comments about this article, let me know in the comment section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.