WordPress Navigation Block, Modify Mobile Breakpoint

Categorized:

Written:

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

Subscribe To
Inbox Posts Like This

About The Author:

Autonomy Agency
Autonomy Agency
@autonomy@mindcreatesmeaning.com

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

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).