WordPress Navigation Block, Modify Mobile Breakpoint

Written:

Categorized:

To modify the screen size at which the WordPress Gutenberg Navigation Block switches over from displaying a list of menu items to displaying a collapsed mobile menu – the following code (added as custom CSS to your theme) will do the trick for you.

This code changes the breakpoint from 600px to 1000px. This affects only the Navigation block 👍🏽).

Clean. Concise. Simple.

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

Source: https://stackoverflow.com/questions/74956603/wordpress-navigation-block-how-to-change-mobile-breaking-point

NewsletterNotifications

Get The Latest
Posts To Your Inbox

GET NEW POST
NOTIFICATIONS!

  1. Click  (iOS) or (Android.
  2. Select ‘Add To Home Screen
  3. Click ‘Add‘ & close browser.
  4. Open app from Home Screen.
  5. Accept ‘Push Notifications’. Done!

About The Author:

Enjoy This Post?

If you’ve enjoyed this post – consider a show of support with a WebMention from your own website, by subscribing to a membership plan, by sending a one-time donation, or if you’re old school – by leaving a traditional post comment down below!


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

I’m Webmention Enabled!

Leave a Comment above or…
If your website is WebMention enabled write a post on your own website linking to this post to create a WebMention:

If your website is not WebMention enabled – submit the address of the post you’ve written (the one containing a link to this page) in the box below (but it’s probably simpler to leave a comment or get Webmention Enabled).