Hi there,
Autoptimize is for some reason re-ordering the CSS, anyhow we need to apply some CSS to get the layout you want so try adding this:
@media (max-width: 768px) {
#site-navigation {
display: block !important;
opacity: 1;
}
.inside-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
button.menu-toggle {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
}
.inside-navigation .mobile-bar-items {
position: relative;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.site-branding {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
text-align: center;
}
.inside-navigation .main-nav {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
}