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 minimize menu can be opened from the following location Dashboard->Appearance->Editor:

Answer 1

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;
  }
}