Change mobile menu breakpoint – WordPress Twenty-Twenty-Four theme

You’re correct, the mobile menu breakpoint in Twenty Twenty-Four is indeed fixed at 600px. While there isn’t a specific CSS variable or WP hook/filter currently provided by the theme for adjusting it, there are still ways to achieve your desired outcome:

1. Using Custom CSS:

This is the most straightforward approach. You can add custom CSS to your child theme or directly in the Customizer that targets the media query used for the mobile menu and adjusts the <code class=””>max-width value. Here’s an example:

CSS

@media screen and (max-width: 767px) { // Change 767px to your desired breakpoint
  /* Your custom styles for the mobile menu here */
}

Use code with caution. Learn morecontent_copy

2. Utilizing Hooks and Filters:

Although Twenty Twenty-Four doesn’t offer dedicated hooks/filters for the mobile menu breakpoint, you can leverage existing ones to indirectly affect it. Here are some potential options:

• screen_layout_breakpoints filter: This filter allows you to modify the theme’s breakpoint definitions before they’re used. You can adjust the value for the “small” breakpoint to match your desired mobile menu activation point.
• wp_custom_styles filter: This filter lets you inject custom CSS styles into the theme’s output. You can insert the same media query rule as mentioned in option 1 to modify the breakpoint.
• nav_menu_args filter: This filter provides access to navigation menu arguments. While not directly related to the breakpoint, you could potentially use it to conditionally display the mobile menu based on screen width by checking the <code class=””>$args[‘screen_reader_text’] property.

3. Child Theme Modifications:

If you’re comfortable with theme development, you can modify the theme’s template files directly in your child theme. This might involve searching for the code responsible for rendering the mobile menu and changing the media query used to determine its visibility.

Official Approach:

While modifying the breakpoint through custom CSS or filters is acceptable, it’s important to note that these methods aren’t technically the “official” approach. Ideally, future versions of Twenty Twenty-Four might offer dedicated options for customizing the mobile menu breakpoint through theme options or hooks/filters.

Keep in mind that any modifications you make might break with future theme updates. Always consider implementing your changes through child themes or plugins to maintain theme compatibility.

I hope this information helps you adjust the mobile menu breakpoint in your Twenty Twenty-Four-based theme! Choose the approach that best suits your needs and comfort level, and remember to keep it maintainable for future updates.

I’m wondering if the OP found a simple solution as I was about to ask the exact same question. I’m still quite new to WP and am translating a responsive site I designed (hand coded) using standard HTML and CSS to WordPress as a learning project. So far I’ve succeeded quite well but the breakpoint on the WP version is different which is preventing the 3-column design from displaying well on a mobile phone in landscape mode.

I see that CSS for the Twenty Twenty-four theme can be injected in Editor -> Styles -> Additional CSS. It’s not clear if I need to find wherever the theme hides its current “@media screen and (max-width: 600px)” code and repeat the same with the preferred max-width?

It would be so easy if the Twenty Twenty-four theme offered a simple option to modify that 600px value …

R

Hi, The below snipped works fine for main menu so far but I haven’t finished the project so not sure what still awats… ??

// SCSS
// adjust the mobile menu breakpoint

$breakpoint--global-header: 1300px;

@media (max-width: $breakpoint--global-header) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}


@media (min-width: $breakpoint--global-header) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
		width: 100%;
		position: relative;
		z-index: auto;
		background-color: inherit;
	}
}