2023 theme mobile menu break point

  • Resolved klpiazza

    (@klpiazza)


    1 year, 10 months ago

    This may have been asked – I can’t find any info anywhere. I lack patience ?? I refuse to use a plugin for something that should be fairly simple.

    First, is there an existing solution to where the mobile menu (hamburger) snap point can be adjusted? Right now it is at 600px. I’d like it to be closer to 1000px.

    If there is no existing solution, what is the backend solution? Is it a CSS override, or a function code that can be implemented?

    Any help would be very appreciated. Thanks.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • 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

    Thread Starter klpiazza

    (@klpiazza)

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

    Moderator Kathryn Presner

    (@zoonini)

    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/

    Dave Loebig

    (@pacesettermedia)

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

    • This reply was modified 1 year, 3 months ago by Dave Loebig.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘2023 theme mobile menu break point’ is closed to new replies.