How To Make A Sticky Header In Astra Theme – Easy Steps 2022

How To Make A Sticky Header In Astra Theme [Pro]

Making the header sticky from the theme option is a premium feature available with Astra Pro Addon Plugin,
This option will fix the header at the top of your website on every page and when a user scrolls any page down, the header will remain at the top.
Before Making these steps make sure that you have the Astra Theme Installed along with the Astra Pro Addon Plugin.

Step 1: Activate the Sticky Header module

Go To – WordPress Dashboard > Appearance > Astra Options and Click Activate On The Sticky Header module.

Step 2: Edit Header Module Settings

Go To – Appearance > Customize > Header > Sticky Header.

Step 3: Edit Sticky Header Settings

After you click the sticky header you will find six different settings:

Stick Primary Header

Clicking on the Stick Primary Header option will make the header section stick to the top of your entire website page’s when users scroll down the header section will remain visible.

Enable Shrink Effect

If your logo or header section high is big then you may need to enable the Shrink Effect option, it is an excellent choice for user experience.
when someone scrolls down on any page, the header section will automatically shrink its size, this option helps your visitors to focus on the content and improves the user experience.

Hide When Scrolling Down

This option is great if you don’t want to disturb your visitors, Hide When Scrolling Down Option hides the header section only on scrolling, so the readers can focus %100 on the content.
but if the visitor scrolls up a bit, the header section will appear again until he scrolls down to be hidden again.

Different Logo for Sticky Header?

Enabling Different Logo for Sticky Header option allows you to upload another logo to your website that appears only on scrolling.
It means that when a visitor scrolls down on any page of your website the header section will stick to the top of the page, but with the new logo that you uploaded on this option.

Different Logo for Retina Devices?

You may be wondering what retina devices are, simply modern devices nowadays come with Retina Display which is a high-definition screen.
The retina logo size is 2x normal logo size, which means that if you want to add a retina logo to your website, you need to make another bigger version of your logo.
For example, if your normal logo size is 210×90 pixels then the retina logo size would need to be 420×180 pixels.
Important tip: make sure to make the retina logo name “logo@2x” it helps with SEO.

Sticky Logo Width

If you want to change the logo width only, you can adjust it from this option, just put the new width in pixels.
Otherwise, if you leave that field empty, the logo size will remain the same.

How To Make A Sticky Header In Astra Theme [Free Version]

Making the header section sticky is also possible with the free version of Astra Theme if you won’t purchase the pro license.
However, you can make the header sticky with custom CSS code.
Follow the next steps to know how to make a sticky header in Astra Theme Free version:

Step 1: Go To – Appearance > Customize > Additional CSS.
and just add the following CSS code and press Publish

/* Astra sticky header */
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}
/* Fix content padding */
.site-content {
    padding-top: 75px;
}
/* Fix content padding in mobile */
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}
/* Fix content padding in mobile */
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

The Additional CSS section does not affect by updating the theme.

Conclusion

It’s important to make the header section sticky, making the header sticky helps your website visitors to easily navigate the main and important sections of your website.
Astra theme makes it easy to make the header section sticky, with the premium feature in the Astra Pro Addon plugin or by adding a simple CSS code to the Additional CSS option on the free version of Astra Theme.
Now you know how to make a sticky header in Astra Theme.
If you have any further questions about the sticky header or any other Astra Theme option, let me know in the comment section below.