We have a “block style” NAV which is using navigation as header.
Somewhere around 1100px is bumps to the next line, leaving the log on the first line, and looks terrible. We tried to use % for the width of the NAV blocks, so that maybe they would be responsive to different browser sizes, but it doesn’t work.
@media(min-width: 769px) {
/* Stop menu from wrapping */
.main-navigation.has-branding .inside-navigation {
flex-wrap: nowrap !important;
}
/* ensure logo does not shrink */
.navigation-branding {
flex-shrink: 0;
margin-right: unset;
}
/* Force nav to fill space */
.main-navigation:not(.slideout-navigation) .main-nav {
flex: 1;
}
/* Flex Menu items */
.main-navigation ul {
display: flex;
}
/* Menu items fill 20% of space availble */
.main-navigation ul li {
flex: 1 1 20%;
}
/* Reduce menu item padding */
.main-navigation .main-nav ul li a {
padding: 10px;
}
}