Astra Advanced Free Sticky Menu

1. Copy the CSS into yourstyle.cssfile or in Appearance > Customize > Additional CSS.

/**
 * ASTRA STICKY HEADER - VERSION 2
 */

body.is-scrolled {
    padding-top: 80px !important;
}

body.is-scrolled .ast-main-header-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 9999 !important; 
    background-color: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease;
}

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;
    left: 0 !important;
    width: 100% !important;
    z-index: 9998 !important;
    background-color: #ffffff !important;
    height: auto !important; 
    max-height: calc(100vh - 80px) !important; 
    overflow-y: auto !important;  
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.ast-mobile-menu-trigger-wrapper, 
.main-header-menu-toggle {
    z-index: 10000 !important;
    position: relative;
}

body.is-scrolled .ast-above-header-wrap,
body.is-scrolled .ast-below-header-wrap {
    display: none !important;
}

body.admin-bar.is-scrolled .ast-main-header-wrap {
    top: 32px !important;
}

@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 yourfunctions.phpfile (child theme recommended).

<?php
/**
 * Plugin Name: Astra Free Sticky Header
 * Version: 2
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function astra_sticky_header_js_logic() {
    ?>
    <script>
        (function() {
            const updateScroll = () => {
                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');

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.

Scroll to Top