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 (v. 1.2)
📌 How to use it?
1. Copy the CSS into your style.css file or in Appearance > Customize > Additional CSS.
/**
* ASTRA STICKY HEADER - VERSION 1.2
*/
/* 1. Previene il "salto" del contenuto quando l'header diventa fixed */
body.is-scrolled {
padding-top: 80px !important; /* Altezza media header mobile */
}
/* 2. Header Sticky - Configurazione Core */
body.is-scrolled .ast-main-header-wrap {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
width: 100% !important;
z-index: 9999 !important; /* Sempre sopra il contenuto */
background-color: #ffffff !important;
box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
transition: all 0.3s ease;
}
/* 3. FIX MENU MOBILE: Posizionamento e Trasparenza */
/* Questo blocco corregge il "muro bianco" che copriva tutto il post */
body.is-scrolled .main-header-bar-navigation,
body.is-scrolled .ast-mobile-header-content,
body.is-scrolled .ast-mobile-popup-drawer {
position: fixed !important;
top: 80px !important; /* Si ancora sotto l'header */
left: 0 !important;
width: 100% !important;
z-index: 9998 !important; /* Sotto la barra header ma sopra il post */
background-color: #ffffff !important;
/* Gestione Altezza Dinamica */
height: auto !important;
max-height: calc(100vh - 80px) !important; /* Evita che il menu esca dallo schermo */
overflow-y: auto !important; /* Permette lo scroll se il menu è lungo */
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* 4. Sincronizzazione Icone e Trigger */
/* Assicura che l'hamburger/X rimanga visibile e cliccabile */
.ast-mobile-menu-trigger-wrapper,
.main-header-menu-toggle {
z-index: 10000 !important;
position: relative;
}
/* 5. Pulizia elementi durante lo scroll */
body.is-scrolled .ast-above-header-wrap,
body.is-scrolled .ast-below-header-wrap {
display: none !important;
}
/* 6. Fix per utenti loggati (Admin Bar di WordPress) */
body.admin-bar.is-scrolled .ast-main-header-wrap {
top: 32px !important;
}
/* Mobile Admin Bar Fix (più alta su schermi piccoli) */
@media screen and (max-width: 782px) {
body.admin-bar.is-scrolled .ast-main-header-wrap {
top: 46px !important;
}
body.admin-bar.is-scrolled .main-header-bar-navigation,
body.admin-bar.is-scrolled .ast-mobile-header-content {
top: calc(46px + 80px) !important;
}
}2. Add the PHP script to your functions.php file (child theme recommended).
<?php
/**
* Plugin Name: Astra Free Sticky Header
* Description: Soluzione professionale e pulita per lo sticky header di Astra Free.
* Version: 1.2
* Author: Web, of course!
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Gestione della classe is-scrolled via JavaScript leggero
*/
function astra_sticky_header_js_logic() {
?>
<script>
(function() {
const updateScroll = () => {
// Attiva lo sticky dopo 60px di scroll per maggiore stabilità
const isScrolled = window.scrollY > 60;
if (isScrolled !== document.body.classList.contains('is-scrolled')) {
document.body.classList.toggle('is-scrolled', isScrolled);
}
};
window.addEventListener('scroll', updateScroll, { passive: true });
window.addEventListener('load', updateScroll);
})();
</script>
<?php
}
add_action('wp_footer', 'astra_sticky_header_js_logic');
/**
* Caricamento CSS con versione aggiornata per pulizia cache
*/
function astra_sticky_header_enqueue_assets() {
wp_enqueue_style(
'astra-free-sticky-header-css',
plugin_dir_url( __FILE__ ) . 'assets/css/sticky-header.css',
array(),
'1.2'
);
}
add_action( 'wp_enqueue_scripts', 'astra_sticky_header_enqueue_assets' );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.
