Elementor Pro and Astra have different breakpoints – how to salvage?

In my case, it was the fact that the theme displayed the mobile header/navigation at 921px whereas my page builder was configured to do so at 1024px. And although I had full control over the page/theme builder’s breakpoints< for this particular case, I wanted to keep it at 1024px.

Luckily the theme was developed with a filter that returns the breakpoint for the header, so that these such adjustments can be made. It was quite simple:

/**
 * Change the breakpoint of the Astra Header Menus
 * 
 * @return int Screen width when the header should change to the mobile header.
 */
function bene_change_header_breakpoint() {
 return 1024;
};

add_filter( 'astra_header_break_point', 'bene_change_header_breakpoint' );

Now everything that needs to match, breakpoint-wise, does in fact match – crisis averted.

My official answer is that if this theme had such filters, there’s probably a good chance others do as well. So if you are faced with this type of issue, check the theme’s documentation for filters like this.

Source: https://wpastra.com/docs/change-astra-header-breakpoint-width/