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]
