Navigation formatting change since update to 6.1

A little more information:

This seems to depend on screen size, when I make the browser smaller, the line reaches the sides of the container (which is probably why it reacts as expected in the customizer.)

Poking around the header template – there is a new section called Dimensions / block spacing attached to the navigation block. I set the spacing to 1 and got the items all on one line again but the top border still doesn’t reach the sides.

and one last (maybe ?? ) thing – there is no way to close the menu on mobile without actually selecting a menu item i.e. there is no x or close or other way to get rid of the menu.

How are you applying the top border to the nav menu? Is it some custom CSS?

I can see this custom CSS applied to the inner container of the nav which is not as wide as the header:

.wp-block-navigation__container {
  border-top: solid;
  border-width: 2px;
}

I think changing this to target the outer container of the nav would make the top border go to the full width of the header:

.wp-block-navigation {
  border-top: solid;
  border-width: 2px;
}

Regarding closing the menu on mobile, I can see the X close button on your site and it seems to be working correctly.
Is there any more detailed information you can provide about this issue? What steps to take to recreate the issue?

Yes, I use custom css with the customizer.
I changed the code and yes, that worked. Thank you!
Is it possible that the navigation container size changed with the last update? Because up until then, the previous code was fine.

On the other note, with the mobile menu, I checked again and the X is there, only it was hiding on me. The menu size is wider than my phone screen, so in order to see the x, I have to swipe to the right.
This is also a new development, since the update to 6.1.

You can see what I mean in these screenshots.

Thanks again for your help!

I’m not 100% certain but it looks like the positioning of the accessibility icon/button from the One Click Accessibility plugin could be causing the overall page width to overflow on touch devices, and this may be resulting in the position of the menu close icon being off the page.

You could try something like this custom CSS:

.wp-block-navigation__responsive-container.is-menu-open {
  max-width: 100vw;
}