Change mobile menu breakpoints - WordPress Twenty Two Three Theme

Question

WordPress Navigation Block - Twenty Two Three Theme How to change CSS media query breakpoints so that the hamburger button appears on mobile devices and the full menu appears on wider screens? The hamburger minimized menu Dashboard->Appearance->Editor can be opened from the following location:

P粉476475551 · Answer

Add this to the child theme's CSS, changing the value in brackets:

@media screen and (max-width: 767px) {
  /* hamburger button */
  .wp-block-navigation__responsive-container-open  {
    display: block !important;
  }

  /* full menu */
  .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
    display: none !important;
  }
}