Astra offers an option to change Menu Breakpoint for Mobile Header ( setting – Layout > Header > Primary header > Mobile header ). When you increase this breakpoint, a transparent menu color does not work on devices with the width from 768px to Menu Breakpoint width.
To fix this add the following code to child theme’s functions.php file.
/**
* Function to disable the transparent header below 800px screen
*
* @return void
*/
function disable_transparent_header_mobile() {
?>
<script type="text/javascript" >
jQuery(window).on('resize', function(){
if ( '800' >= jQuery( window ).width() ) {
if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );
}
} else {
if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );
}
}
});
jQuery( document ).ready(function() {
if ( '800' >= jQuery( window ).width() ) {
if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );
}
} else {
if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );
}
}
});
</script>
<?php
}
add_action( 'wp_footer', 'disable_transparent_header_mobile' );Important Note: Please replace 800 with the Menu Breakpoint width you setup in the customizer.
