{"id":6236,"date":"2026-02-27T06:50:00","date_gmt":"2026-02-27T05:50:00","guid":{"rendered":"https:\/\/webofcourse.com\/sticky-fixed-header-astra-theme-free\/"},"modified":"2026-02-28T20:22:54","modified_gmt":"2026-02-28T19:22:54","slug":"sticky-fixed-header-astra-theme-free","status":"publish","type":"post","link":"https:\/\/webofcourse.com\/en\/sticky-fixed-header-astra-theme-free\/","title":{"rendered":"Advanced Sticky \/ Fixed header Astra Theme Free"},"content":{"rendered":"\n<p>If you\u2019re using the <strong>Astra Free<\/strong> theme on WordPress and have set up your header with the <strong>Top Bar (Above Header)<\/strong> and the <strong>Below Header<\/strong>, you might want to keep only the <strong>Primary Header<\/strong> 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 <strong>sleek and lightweight sticky header<\/strong>, perfect for improving usability and site navigation.<\/p>\n\n\n\n<p>\ud83d\udd27 <strong>What does this script do?<\/strong><br>When the user scrolls down the page:<\/p>\n\n\n\n<ul class=\"wp-block-list check\">\n<li>It automatically hides the above header and below header.<\/li>\n\n\n\n<li>Makes the primary header sticky at the top with a smooth transition effect.<\/li>\n\n\n\n<li>Adds space below the header to prevent content &#8220;jumps&#8221;.<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udca1 <strong>Perfect for<\/strong>: blogs, showcase sites, business portals, or any Astra installation where you want to maximize visible space during reading or navigation.<\/p>\n\n\n\n<p>\ud83d\udce5 <strong>Free download<\/strong><br>You can download the code for free and paste it directly into your child theme or a custom snippet plugin. It\u2019s compatible with the free version of Astra and <strong>does not require any additional plugins<\/strong>.<\/p>\n\n\n\n<p>If you want to install it as a plugin, you can <a href=\"https:\/\/webofcourse.com\/wp-content\/uploads\/2026\/02\/astra-free-sticky-header-1.2.zip\">download<\/a><a href=\"\/?p=6344\"> it here<\/a> (v. 1.2)<\/p>\n\n\n\n<p>\ud83d\udccc <strong>How to use it?<\/strong><\/p>\n\n\n\n<p>1. Copy the CSS into your <code>style.css<\/code> file or in <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * ASTRA STICKY HEADER - VERSION 1.2\n *\/\n\n\/* 1. Previene il \"salto\" del contenuto quando l'header diventa fixed *\/\nbody.is-scrolled {\n    padding-top: 80px !important; \/* Altezza media header mobile *\/\n}\n\n\/* 2. Header Sticky - Configurazione Core *\/\nbody.is-scrolled .ast-main-header-wrap {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0;\n    right: 0;\n    width: 100% !important;\n    z-index: 9999 !important; \/* Sempre sopra il contenuto *\/\n    background-color: #ffffff !important;\n    box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;\n    transition: all 0.3s ease;\n}\n\n\/* 3. FIX MENU MOBILE: Posizionamento e Trasparenza *\/\n\/* Questo blocco corregge il \"muro bianco\" che copriva tutto il post *\/\nbody.is-scrolled .main-header-bar-navigation,\nbody.is-scrolled .ast-mobile-header-content,\nbody.is-scrolled .ast-mobile-popup-drawer {\n    position: fixed !important;\n    top: 80px !important; \/* Si ancora sotto l'header *\/\n    left: 0 !important;\n    width: 100% !important;\n    z-index: 9998 !important; \/* Sotto la barra header ma sopra il post *\/\n    background-color: #ffffff !important;\n    \n    \/* Gestione Altezza Dinamica *\/\n    height: auto !important; \n    max-height: calc(100vh - 80px) !important; \/* Evita che il menu esca dallo schermo *\/\n    overflow-y: auto !important; \/* Permette lo scroll se il menu \u00e8 lungo *\/\n    \n    box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\n\/* 4. Sincronizzazione Icone e Trigger *\/\n\/* Assicura che l'hamburger\/X rimanga visibile e cliccabile *\/\n.ast-mobile-menu-trigger-wrapper, \n.main-header-menu-toggle {\n    z-index: 10000 !important;\n    position: relative;\n}\n\n\/* 5. Pulizia elementi durante lo scroll *\/\nbody.is-scrolled .ast-above-header-wrap,\nbody.is-scrolled .ast-below-header-wrap {\n    display: none !important;\n}\n\n\/* 6. Fix per utenti loggati (Admin Bar di WordPress) *\/\nbody.admin-bar.is-scrolled .ast-main-header-wrap {\n    top: 32px !important;\n}\n\n\/* Mobile Admin Bar Fix (pi\u00f9 alta su schermi piccoli) *\/\n@media screen and (max-width: 782px) {\n    body.admin-bar.is-scrolled .ast-main-header-wrap {\n        top: 46px !important;\n    }\n    body.admin-bar.is-scrolled .main-header-bar-navigation,\n    body.admin-bar.is-scrolled .ast-mobile-header-content {\n        top: calc(46px + 80px) !important;\n    }\n}<\/code><\/pre>\n\n\n\n<p>2. Add the PHP script to your <code>functions.php<\/code> file (child theme recommended).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/**\n * Plugin Name: Astra Free Sticky Header\n * Description: Soluzione professionale e pulita per lo sticky header di Astra Free.\n * Version: 1.2\n * Author: Web, of course!\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n    exit;\n}\n\n\/**\n * Gestione della classe is-scrolled via JavaScript leggero\n *\/\nfunction astra_sticky_header_js_logic() {\n    ?&gt;\n    &lt;script&gt;\n        (function() {\n            const updateScroll = () =&gt; {\n                \/\/ Attiva lo sticky dopo 60px di scroll per maggiore stabilit\u00e0\n                const isScrolled = window.scrollY &gt; 60;\n                if (isScrolled !== document.body.classList.contains('is-scrolled')) {\n                    document.body.classList.toggle('is-scrolled', isScrolled);\n                }\n            };\n            window.addEventListener('scroll', updateScroll, { passive: true });\n            window.addEventListener('load', updateScroll);\n        })();\n    &lt;\/script&gt;\n    &lt;?php\n}\nadd_action('wp_footer', 'astra_sticky_header_js_logic');\n\n\/**\n * Caricamento CSS con versione aggiornata per pulizia cache\n *\/\nfunction astra_sticky_header_enqueue_assets() {\n    wp_enqueue_style( \n        'astra-free-sticky-header-css', \n        plugin_dir_url( __FILE__ ) . 'assets\/css\/sticky-header.css', \n        array(), \n        '1.2' \n    );\n}\nadd_action( 'wp_enqueue_scripts', 'astra_sticky_header_enqueue_assets' );<\/code><\/pre>\n\n\n\n<p>Adjust heights or colors as needed to match your design.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u2705 Easy to implement<br>\ud83d\udca8 No performance impact<br>\ud83d\udcf1 Responsive and compatible with all devices<\/p>\n\n\n\n<p><a href=\"\/?p=6272\">How to Install Custom Fonts (Excluding Google Fonts) in Astra Free.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re 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<span class=\"read_more_area\"><a class=\"read-more\" href=\"https:\/\/webofcourse.com\/en\/sticky-fixed-header-astra-theme-free\/\"> Scopri di pi\u00f9&#8230;. <\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":6284,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[81],"tags":[83],"class_list":["post-6236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-astra-free-theme"],"uagb_featured_image_src":{"full":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header.webp",1024,1024,false],"thumbnail":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-150x150.webp",150,150,true],"medium":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-300x300.webp",300,300,true],"medium_large":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-768x768.webp",768,768,true],"large":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header.webp",1024,1024,false],"1536x1536":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header.webp",1024,1024,false],"2048x2048":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header.webp",1024,1024,false],"post-thumbnail":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-604x270.webp",604,270,true],"apcore_blog_large":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-1024x546.webp",1024,546,true],"apcore_blog_medium":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-900x622.webp",900,622,true],"apcore_blogstyle_thumb":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-700x737.webp",700,737,true],"apcore_modern3_thumb_big":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-533x546.webp",533,546,true],"apcore_modern4_thumb_big":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-1024x546.webp",1024,546,true],"apcore_modern4_thumb_small":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-533x273.webp",533,273,true],"apcore_shortcode_portfolio_squared":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-768x768.webp",768,768,true],"apcore_shortcode_portfolio_landscape":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-768x384.webp",768,384,true],"apcore_shortcode_portfolio_portrait":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-384x768.webp",384,768,true],"apcore_shortcode_portfolio_small_squared":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-384x384.webp",384,384,true],"woocommerce_thumbnail":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-300x300.webp",300,300,true],"woocommerce_single":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-600x600.webp",600,600,true],"woocommerce_gallery_thumbnail":["https:\/\/webofcourse.com\/wp-content\/uploads\/2025\/09\/astra-free-advanced-sticky-header-100x100.webp",100,100,true]},"uagb_author_info":{"display_name":"Web, of Course! Team","author_link":"https:\/\/webofcourse.com\/en\/author\/cingerla\/"},"uagb_comment_info":0,"uagb_excerpt":"If you\u2019re 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&hellip;","_links":{"self":[{"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/posts\/6236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/comments?post=6236"}],"version-history":[{"count":15,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/posts\/6236\/revisions"}],"predecessor-version":[{"id":6351,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/posts\/6236\/revisions\/6351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/media\/6284"}],"wp:attachment":[{"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/media?parent=6236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/categories?post=6236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webofcourse.com\/en\/wp-json\/wp\/v2\/tags?post=6236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}