Wordpress Navigation Block: how to change mobile breaking point?

Question

Cheers. Anybody knows if I can change properly the mobile breaking point of the wordpress navigation block (wp-block-navigation) for example in theme.json or over functions.php? There is a css solution (--> answers below), but I would be still curious if there is a way without having a css overwrite battle. Thx :)

Answer 1

After getting the right direction from the answers given, below is the css needed to change the default breaking point of 600px to 1000px. It's a bit ugly using !important, but as it seems like there is no filter or settings (for example in theme.json) this is the only working way I found, to neutralize wp defaults.

/* copy of wp default css to a 1000px media query */
@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;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

/* neutralize the wp default for 600px */
@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;
    }
}