Skip to content

Instantly share code, notes, and snippets.

@richb-hanover

richb-hanover/change-astra-header-breakpoint-width.md

Last active March 7, 2024 17:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richb-hanover/0cfe5f3aeb9acd777c763ec6c8b30b24 to your computer and use it in GitHub Desktop.
Save richb-hanover/0cfe5f3aeb9acd777c763ec6c8b30b24 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
change-astra-header-breakpoint-width.md

In Astra Theme, the default header breakpoint is 921px. That means mobile header will be triggered at 921px screen size.

To change the default header breakpoint, edit the astra_header_break_point in a child theme. In the example below, 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' );

Additional resources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment