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

About The Author:

Level Price Action
Monthly Supporter

$3.00.

Select

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

Subscribe To
Inbox Posts Like This

Your data is kept private and only ever shared with third parties that make this service possible. Read our full Privacy Policy.