Transparent Header Menu Color not working with Mobile Breakpoint

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.