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).

7aJp9Mr5BAa9O6UaKLWzonFpu11Ln9EKy60ShJz7u0TWcLUVfq

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. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
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 *

Search

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