How to Create a Sticky Header Using Astra Theme

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.

bTDXY1vrrWhGZN r7XMc 01a6geAuny3YaqnuE1kaig3ruiv b6iwRSI xCRIOBR1Sng6X2ztpaNDsPnWN8fZoi9gCzGALQFY1y Cwz43SMzYOMq99zHPkI khPWR3RT8zRTKjLm
Create a Sticky Header Using Astra Theme

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)

t05SRNheLw5D 83CtnO810j1gGKj3m1O18YPo79niQu5pi4ewiXLIV21U6 3J3E 3j4cdDJkGJFttPnrcnsBDEOZoURCeyH7vFHScm ukwVR

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)

4j8DzR1turU0ep2j0RO0msT01VJvUORn BghIadWhcacgciqprA9qw229MbWi9yJ6T3DE5gruOhIvdU6O 7nlj ME80D1Nxp6oVPvIEcRliUKVMspN Wubf42aAW0WJGHFoQpnQK

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.

YM5kqe48sg5ZAewmqoNnat HbJhSOVgVdtIMAl6a3yJLRWQwiwXeklshKad SoTFcKGIVrDjpOHlooZ1phzJFn st qV JZX xM5dMobg5fhxZSI1 P OH3

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users