How To Make Sticky Header In WordPress Astra Theme Free

Are you using the free version of the Astra theme for WordPress? Do you want to keep your menu visible at the top of the page for your visitors? You can easily add a sticky header to your Astra theme website using a simple CSS code.

How to Add a Sticky Header CSS to Your Astra Theme Website

1. Log in to your WordPress website and go to your homepage.
2. Click on “Customise” in the WordPress admin bar at the top.

3. Click on “Additional CSS” near the bottom.

4. Paste the following code into the box that appears:
/* sticky header */
.site-header {
top: 0;
position: sticky;
width: 100%!important;
}
1. Click “Publish” at the top of the page.

Explanation of the CSS Code

• The first line is a CSS comment that explains what the code does.
• .site-header is the class of the header div element.
• top: 0 means the header will be stuck to the top of the page.
• position: sticky means the header will remain in place while you scroll.
• width: 100%!important ensures the header resizes properly when you drag a tab from one screen to another or turn your phone from portrait to landscape.

What if I’m Using the Astra Transparent Header?

If you’re using the Astra transparent header, you’ll need to use a different class (main-header-bar) and position type (fixed). Here’s the modified code:

/* sticky header for transparent header version */
.main-header-bar {
top: 0;
position: fixed;
width: 100%!important;
}

Note that this code may not work perfectly with anchor links that scroll to a Div ID on the same page.

Adapting the Sticky Header Code for Other Themes

If you’re using a different WordPress theme, you’ll need to change the class name in the code to match your theme’s header element. You can use the Chrome Inspect tool to find the correct class name.

Bottom Line

Adding a sticky header to your Astra theme website is a simple and effective way to improve user experience and navigation. By following the steps outlined in this article, you can easily add a sticky header to your website using a simple CSS code. Remember to adjust the code according to your theme’s requirements, and don’t hesitate to experiment with different styles and designs to find the perfect look for your website.