Navigation Block: Change resolution at which mobile version of navigation activates

[anddev32]

Hello,

Is there a way to set the resolution at which the mobile version menu (icon/label shown) replaces the desktop navigation version?

From what I see it triggers at a screen width of 599px.

I would like to be able to active the mobile version navigation at a higher resolution.

I hope to avoid using a hack in which I create a javascript that replicates the current behaviour at the resolution I want.

I am not too familiar with wordpress code however after browsing for an afternoon through the code I couldn't find any settings. I have also checked the javascripts (navigation/view.min.js,navigation/view-modal.min.js) the wordpress generates on the frontend and maybe I missed something but I couldn't find an answer there.

Thanks.
And

[skorasaurus]

Unfortunately, there isn't a built-in setting that is easily accessible to modify; this has been requested at #45040

[helixgdn]

Hi!

Here is the solution.

Let's say you want the mobile breakpoint to be at 1024px.

Include the following css code in your theme:

`@media (min-width: 600px) {
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    left: 0
}

}

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

@media (min-width: 1024px) {
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    left: 0
}

}`

Hope this helps.