To modify the screen size at which the WordPress Gutenberg Navigation Block switches over from displaying a list of menu items to displaying a collapsed mobile menu – the following code (added as custom CSS to your theme) will do the trick for you.

This code changes the breakpoint from 600px to 1000px. This affects only the Navigation block 👍🏽).

Clean. Concise. Simple.

@media ( min-width: 1000px ) { .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; }}@media ( min-width: 600px ) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }}

Source: https://stackoverflow.com/questions/74956603/wordpress-navigation-block-how-to-change-mobile-breaking-point

Was this helpful?

Submit Cancel

Thanks for your feedback!

https://mindcreatesmeaning.com/wordpress-navigation-block-modify-mobile-breakpoint/

#breakpoints #css #gutenberg #wordpressNavigationBlock