Change the Astra Header Breakpoint Width

In Astra, the breakpoints allow switching to a tablet/mobile header that enables the toggle menu at a specific screen size. By default, Astra’s breakpoints are:

• Tablet breakpoint: 921px
• Mobile breakpoint: 544px

This means the toggle menu will be enabled when the screen size is reduced to 921px or lower. These breakpoints are helpful in Astra’s responsive design.

In this doc, you will learn how to modify these breakpoints to enable the hamburger menu on some modern tablets with a higher viewport size than the default 921px.

For example, if you wish to enable the toggle menu on the iPad Pro, then you need to change the default tablet breakpoint to 1024px or higher.

Please follow the below instructions to modify the mobile tablet breakpoints for the Astra header for New Header Builder and Old Header.

Change Mobile/Tablet Breakpoints for New Header Builder

If you’re using the new header footer builder on the website, you can add the below code to change the mobile and tablet breakpoints separately.

To change the Tablet Breakpoint:

// Update your custom tablet breakpoint below - like return 1024;
add_filter( 'astra_tablet_breakpoint', function() {
    return 1024;
});

To change the Mobile Breakpoint:

// Update your custom mobile breakpoint below - like return 544;
add_filter( 'astra_mobile_breakpoint', function() {
    return 544;
});

Note: Follow the steps here in this document to add the above filter or any custom code using the Child Theme or other methods as mentioned.

Change Astra header breakpoints for Old Header

We recommend that you upgrade to the New Header Hooter builder, which has an assortment of new features and provides a more seamless experience.

However, if you’re still using the Old Header on your website and are unable to switch to New Header Builder, you can follow the below instructions to change the header breakpoints and enable the hamburger menu at the required viewport size.

From the customizer

The quick option to change the Astra header breakpoint for the Old Header is by navigating to Customize > Header > Primary Menu > Mobile Menu. Here, you can change the menu breakpoint for the Old Header.

Using the Code

If the above option does not work on the website, you can use the following code to modify the breakpoint for the Old Header in Astra.

/**
 * 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' );

If you don’t have your Child Theme installed, please check this article on how to do it.

If you are not sure how to add this code, please check this article.

How to identify the Old Header and New Header Builder in Astra

After years of evolution and updates, the old header footer is at the point where it can no longer handle all of the new features. It is highly recommended to upgrade to the New Header Footer builder for all the new features and improvements.

Here is how you can identify if the website is using the Old Header or New Header Builder

• You can navigate to the Customizer and check how the header and footer are named. For the New Header Footer Builder, you will see the Header Builder and Footer Builder. However, for the Old Header, just the Header and Footer are shown.

• Another option to identify is by navigating to WP Dashboard > Astra Dashboard > Settings. Here, you will find the option to switch to the New Header Footer builder if the Old Header is enabled. If you do not see such an option, it means the New Header Footer Builder is already enabled.

 We hope the above instructions will help you use the header efficiently on the website and modify the breakpoints according to your requirements. If you have any questions or suggestions, please feel free to share.