# Show the Navigation Block's Mobile Menu on Tablets Too

> Switches the Navigation block to its hamburger (mobile) menu up to 1024px wide instead of 600px, so long menus no longer squeeze or wrap on tablets.

- Type: CSS
- Runs: Site-wide header
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: navigation, mobile-menu, responsive
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/navigation-block-hamburger-breakpoint/

## Code

```css
@media (min-width: 600px) and (max-width: 1023px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}
```

## Notes

Change 1023px to another width to move the breakpoint. Only affects Navigation blocks set to show the overlay menu on mobile.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Show the Navigation Block's Mobile Menu on Tablets Too" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/