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.
