• 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.

📌 Come si usa?

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

/* 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) */
}

2. Aggiungi lo script PHP nel tuo functions.php (tema child consigliato).

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

Regola eventuali altezze o colori secondo il tuo design.

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