2023 theme mobile menu break point

I have used this CSS override in a theme with success.

@media (min-width: 1000px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    left: 0;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

@media (max-width: 999px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

You could add this to the stylesheet of a child theme, or in the classic Customizer > Additional CSS

@uxl Thanks! That’s a lot of work. I thought there might be a simpler option. Much appreciated. Take care.

Thanks for providing your CSS override, @uxl!

@klpiazza It’s actually just a copy-paste, since Uxl already wrote the CSS. ??

While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then paste this custom CSS in the Additional CSS area.

This is the best way to override the mobile breakpoint, since this isn’t an option in the editor.

Oops yes sorry should have said it’s just a copy & paste.

There are two values you can change if you want min-width: 1000px at line 1 and max-width: 999px at line 20.

For example if you want the mobile menu to come in at say 960px, change min-width to 960px and max-width to 1 less, so that would be min-width: 960px and max-width: 959px

Answered on StackOverflow

https://stackoverflow.com/questions/75186930/change-mobile-menu-breakpoint-wordpress-twenty-twenty-three-theme/

Thanks, @uxl , that answers the question I searched.

• This reply was modified 1 year, 3 months ago by Dave Loebig.