If you’re using the Astra Free theme on WordPress and have set up your header with the Top Bar (Above Header) and the Below Header, you might want to keep only the Primary Header visible while the user scrolls down the page. This CSS and JavaScript code allows you to do exactly that, turning your main header into a sleek and lightweight sticky header, perfect for improving usability and site navigation.
🔧 What does this script do?
When the user scrolls down the page:
- It automatically hides the above header and below header.
- Makes the primary header sticky at the top with a smooth transition effect.
- Adds space below the header to prevent content “jumps”.
💡 Perfect for: blogs, showcase sites, business portals, or any Astra installation where you want to maximize visible space during reading or navigation.
📥 Free download
You can download the code for free and paste it directly into your child theme or a custom snippet plugin. It’s compatible with the free version of Astra and does not require any additional plugins.
If you want to install it as a plugin, you can download it here.
📌 How to use it?
1. Copy the CSS into your style.css file or in Appearance > Customize > Additional CSS.
/* Basic styles for the main header */
.ast-main-header-wrap {
z-index: 999;
transition: all 0.3s ease-in-out;
}
/* Hide the above header and below header when the page is scrolled */
body.is-scrolled .ast-above-header-wrap,
body.is-scrolled .ast-below-header-wrap {
display: none !important;
}
/* Make the main header sticky and visible only when scrolling */
body.is-scrolled .ast-main-header-wrap {
position: fixed !important;
top: 0 !important;
width: 100% !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
background-color: #fff !important; /* Background color of the sticky header */
}
/* Push the page content down to prevent layout shift when header becomes fixed */
body.is-scrolled .site-content {
margin-top: 100px !important; /* Set this to the height of your main header (e.g. 100px) */
}
/* 1. Makes the mobile header fixed (base) */
body.is-scrolled #ast-mobile-header {
position: fixed !important;
top: 0 !important;
width: 100% !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
background-color: #fff !important;
z-index: 999;
}
/* 2. Fix to position the mobile menu CONTENT below the header */
/* We only use the generic container that appears when the menu opens. */
body.is-scrolled .ast-mobile-header-content {
/* We keep the 'fixed' and 'bottom: 0' properties for scrolling */
position: fixed !important;
width: 100% !important;
bottom: 0 !important;
overflow-y: auto !important; /* Important for menu scrolling */
background-color: #fff !important;
z-index: 998;
}
/* 3. Definition of TOP height to anchor it BELOW the header */
/* Use the total height of the fixed header, including the above-header (if visible) */
body.is-scrolled .ast-mobile-header-content {
top: 100px !important; /* Try 100px as a starting point. */
}
/* If you still have issues, you might need to increase specificity */
/* Replace this block if the previous one doesn't work */
/* body.is-scrolled #ast-mobile-header .ast-mobile-header-content {
top: 100px !important;
...
} */2. Add the PHP script to your functions.php file (child theme recommended).
function custom_sticky_header_script() {
?>
<script>
// Adds or removes the 'is-scrolled' class on the body
function onScroll() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollPos > 100) { // Replace 100 with your desired scroll distance
document.body.classList.add('is-scrolled');
} else {
document.body.classList.remove('is-scrolled');
}
}
window.addEventListener('scroll', onScroll);
</script>
<?php
}
add_action('wp_footer', 'custom_sticky_header_script');Adjust heights or colors as needed to match your design.
✅ Easy to implement
💨 No performance impact
📱 Responsive and compatible with all devices
How to Install Custom Fonts (Excluding Google Fonts) in Astra Free.
