How to change the navigation breakpoint for mobile Overlay Menu?

[cawa-93]

Currently Overlay Menu brakepoint is 600px. Is to small for our design. I would like set for it at least 800px. I don't see the corresponding settings in Gutenberg. Therefore, it needs to be redefined somehow by CSS? 🤔

[t-hamano]

As far as I know, the only way to do this now is to override the default media queries with CSS.

However, it appears that the introduction of breakpoints (or container queries) is being explored in #45274.

[cawa-93]

After experimenting, it doesn't seem possible. WP navigation block have mobile-first layout and switch to desktop layout on 600px or higher. I can't overwrite that rules without patching wp core files.

[t-hamano]

Yes, I know that the core breakpoint is mobile first. If your expected breakpoint is greater than that, you would need to counteract those core styles once the screen width is greater than 600px.

To take one selector as an example:

/* Part of the default navigation styles */
.wp-block-navigation__responsive-container-open {
	display: flex;
}

@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Reset core style */
@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Apply the core style at 800px again */
@media (min-width: 800px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}