• 0
Close
Close
Wordpress

Se stai utilizzando il tema Astra Free su WordPress e hai configurato il tuo header con la top bar (Above Header) e il Below Header, potresti voler mantenere visibile solo il Primary Header mentre l’utente scorre la pagina. Questo codice CSS e JavaScript ti permette di ottenere esattamente questo risultato, trasformando il tuo header principale in uno sticky header elegante e leggero, perfetto per migliorare l’usabilità e la navigazione del sito.

🔧 Cosa fa questo script?
Quando l’utente scorre la pagina verso il basso:

  • Nasconde automaticamente l’above header e il below header.
  • Rende il primary header fisso in alto (sticky) con un effetto di transizione fluido.
  • Aggiunge uno spazio sotto l’header per evitare “salti” del contenuto.

💡 Perfetto per: blog, siti vetrina, portali aziendali o qualsiasi installazione Astra in cui vuoi massimizzare lo spazio visibile durante la lettura o la navigazione.

📥 Download gratuito
Puoi scaricare il codice gratuitamente e incollarlo direttamente nel tuo tema child o in un plugin di snippet personalizzati. È compatibile con la versione gratuita di Astra e non richiede plugin aggiuntivi.

Se vuoi installarlo come un plugin, puoi scaricarlo qui (v. 1.2).

📌 Come si usa?

1. Copia il CSS nel tuo file style.css o in Aspetto > Personalizza > CSS Aggiuntivo.

/**
 * 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. Aggiungi lo script PHP nel tuo functions.php (tema child consigliato).

<?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' );

Regola eventuali altezze o colori secondo il tuo design.

✅ Facile da implementare
💨 Nessun impatto sulle performance
📱 Responsive e compatibile con tutti i dispositivi

Come inserire font personalizzati (non Google Fonts) in Astra Free.

Tags: