Simple Free Astra Sticky header CSS for WordPress Astra theme

If you are using the free version of the excellent Astra theme for WordPress, then you might like to have an Astra sticky header so the menu is always available at the top of the page for your visitors. You can do this yourself in less than five minutes!

There are various plugins that do this, but it’s super easy to do in CSS yourself, not just for the header but for any element.

Go to your homepage while logged in and press “Customise” in the WordPress admin bar at the top:

Then press “Additional CSS” near the bottom:

In the box that appears, paste the following code and press Publish at the top of the page:

/* sticky header */
.site-header {
 top: 0;
 position: sticky;
 width: 100%!important;
}

If you are using cache on your site, you’ll need to clear that before visitors can see the results – check in an incognito window.

The CSS code for the Astra sticky header will work on both desktop and mobile versions.

Explanation for that Astra sticky header CSS:

The first line is a CSS Comment – anything within the /* and */ will be ignored, so you can write whatever you want in there.

“site-header” is the class of the header div element. So we put a “.” at the start to say we are looking for a class.

Then everything within the curly brackets { } is what we want to be applied to the site-header.

top: 0 means it needs to be applied to the top of the page.

position: sticky means hold the element in place while you scroll.

People used to use position: fixed, but this didn’t apply any adjustment to the following content, so you’d have to adjust for the overlap with further code. position: sticky is much more simple.

width: 100%!important; This line makes sure that even if drag a tab from one screen to another or turn your phone from portrait to landscape, the stuck header resizes properly. I found I needed the “!important” override on some sites.

Adapting the sticky header code for other themes:

If you are using a different WordPress theme, the header area will have a different class name, so you’ll need to change “.site-header” in the code to whatever your theme is using for the header element. Use the Chrome Inspect tool to find out.

Running Google Adsense?

Check that your ads don’t get confused by the sticky areas.