Change Breakpoint for Hamburger Mobile Menu in WordPress Theme Twenty Twenty Two

It took me a while to find the right CSS changes to modify the breakpoint for the hamburger menu from 600px to 940px because in my case this is needed to keep the menu looking nice… and here i want just to share my result with you:

@media (min-width:600px) {
	.wp-block-navigation__responsive-container-open{
      display:block !important;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
   	display:none !important;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
   	display:block !important!
   }
}

@media (min-width:940px) {
	.wp-block-navigation__responsive-container-open{
      display:none !important;
   }
	
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
   	display:block !important;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
   	display:none !important;
   }

	 .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
      -moz-box-shadow: 1px 19px 26px -11px #000000;
      -webkit-box-shadow: 1px 19px 26px -11px #000000; 
      box-shadow: 1px 19px 26px -11px #000000;
   }	
}

just add this to your custom css that you include or put it at the end of the style.css of the theme…

the box-shadow is of course optional, i wanted to have this only in the normal menu….

1 1 vote

Article Rating