In it_Construction and Gantry 5, I've noticed an issue with the main menu and Responsive behavior where there's an intermediate state that results in an odd flex display column split and wrapping of the menu items.

When I set device and mobile menu breakpoints in the template Styles, I observe that between the mobile menu sizes and desktop sizes, the header menu splits into 50/50 instead of the 20/80 split set in layouts.

Setup:
I have set up the Body layout for the Header with two parts: a Module holding the logo taking 20% and the Menu Particle taking 80%. For testing purposes, I have the breakpoints set in pixels at 1200/1200/1024/768 with the mobile menu at 1000px. I intend to change these to rems later, but pixels make troubleshooting easier as I can measure this precisely in the display.

Problem:
When I do a test by reducing the width of my browser incrementally, everything looks as intended at Desktop/Large sizes (>1200px), and Mobile Menu sizes (1000px). However, between 1000 and 1200px, the top menu shifts. Instead of using a 20/80 split, the menu is split 50/50. This of course causes the horizontal menu to wrap to a second line, which makes for a broken display.

Using the browser inspector, I've identified the CSS that flips, and this is what I see.

--------------------------------------

At 1000px when the mobile menu offcanvas icon is showing and the menu is gone, I see this, which is okay:

body [class*="size-"] {
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
flex-grow: 0;
-ms-flex-positive: 0;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
max-width: 100%;
}

-------------------

At the 1000-1200px range, this same page element shifts to this, which is not okay.

#g-header [class*="size-"] {
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
flex-grow: 0;
-ms-flex-positive: 0;
-webkit-flex-basis: 50%;
-moz-flex-basis: 50%;
flex-basis: 50%;
-ms-flex-preferred-size: 50%;
max-width: 50%;
}

The hamburger menu icon has not yet displayed as it is set to be for <1000px, but the Module and Menu Particle now each take up 50% of the width.

-------------------

At greater than 1200px widths, this code completely goes away, and the menu section is replaced with this:

.size-80 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 80%;
-moz-flex: 0 80%;
-ms-flex: 0 80%;
flex: 0 80%;
width: 80%;
}

There is an equivalent CSS rule for the module, but with 20% instead of 80%.

--------------------------------------

This has been the case for awhile, and shows up on all my it_Construction based sites that I've checked. I've ignored the issue until now as this middle width is not typically used, but it's always bothered me that it happens.

Note that it even happens when there is no second position on the Header position.

I have one build where I have the logo on a Top module position.

I would appreciate any insight into how this could be solved. I can implement CSS overrides if I can figure out what to override. I could certainly create some @media overrides, but I'm trying to see if there is some built-in method or technique for fixing this so I don't have to go down that rabbit hole of overly complex codes.

Thanks in advance for any help."