No results found. Try again with different words?

Search must be at least 3 characters.

Mobile Breakpoint Causes Issues with Transparent Header Menu Color

Sidebar Image

Did not find a solution? We are here to help you succeed.

Note:

For users of the new Header Footer Builder post Astra 3.0.0, the breakpoint option will not appear. To adjust the breakpoint, update the tablet breakpoint as stated in this article.

Astra offers an option to change the Menu Breakpoint for Mobile Header at Layout > Header > Primary header > Mobile header.

A menu breakpoint is like a special line for your website’s menu design. It’s the point where the menu layout changes to fit different screen sizes. 

For example, on a computer screen, you might see a full menu with many options, but on a small phone screen, it might switch to a simple menu icon. Web designers set these breakpoints so that the menu looks good on every device.

When you increase this breakpoint, a transparent menu color does not work on devices with a width from 768px to the Menu Breakpoint width.

To fix this add the following code to the 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' );

Please replace 800 with the Menu Breakpoint width you set up in the customizer.

Note: We recommend only adding this code to your child theme for compatibility with future updates.

Hereโ€™s how you can do it:

  • Go to your WordPress dashboard and navigate to Appearance > Theme File Editor.
  • Access your functions.php file from the right and add the above code towards the end.
  • Click on the Update File button to save your changes.

Thatโ€™s it! The transparent menu color should be working as expected now. If not, please contact our support team. Weโ€™re always here to assist you whenever needed!

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

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