How to Change the Astra Header Breakpoint Width?

No results found. Try again with different words?

Search must be at least 3 characters.

    Change the Astra Header Breakpoint Width

    In Astra Theme you can modify the screen size when you want to trigger the mobile header using the filter astra_header_break_point The default breakpoint is 921px. That means the mobile header will be triggered at 921px screen size.

    Note:

    If you are using {Astra’s Header Footer Builder} the below filter will not work, but to change the breakpoint you can go with updating tablet breakpoint as mentioned in this article. [Link here]

    To change the default breakpoint use filter. In the below example the mobile header will be triggered at 1120px screen size. Change 1120 to the screen size of your choice.

    /**
     * Change the breakpoint of the Astra Header Menus
     * 
     * @return int Screen width when the header should change to the mobile header.
     */
    function your_prefix_change_header_breakpoint() {
     return 1120;
    };
    
    add_filter( 'astra_header_break_point', 'your_prefix_change_header_breakpoint' );

    Check out the doc that explains how to add custom PHP code using the child theme’s functions.php file. 

    Note:

    Astra version 1.4.0 and above provides an option to change the breakpoint. You don’t have to use the above filter. Refer to the document here.

    Further, after Astra 3.0.0 in the Astra’s Header Footer builder, we have provided a Mobile header that can be added for the Mobile devices. [Learn More]

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

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