Transparent Header Menu Color not working with Mobile Breakpoint
|
/ Documentation /Custom Code Snippets/Custom CSS/ Transparent Header Menu Color not working with Mobile Breakpoint

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.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
On this page

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

This field is required.

REWIND

YEAR IN REVIEW

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form