Prevent Nav Stacking on Smaller Screen

4 minutes ago, kaydotjpg said:

Here is one site built in Squarespace that seems to prevent stacking really well. 

It does seem to do better, probably helped by not having a border on each link, a decreasing margin, a smaller logo....and most importantly being on 7.0 where this was a native option for the header layout! 🤦‍♂️Really hoping this is added to SQS at some point!

Try this Custom CSS, it improves the situation, but you'll probably want to tweak the values to suit your client:

@media only screen and (max-width:1320px) {
  .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
    margin-left: 0.25vw;
    margin-right: 0.25vw;
    padding:1px 1.5vw;
  }
  .header-nav-item {
    font-size:1vw;
  }
  .header-nav-item:nth-of-type(3) {
    margin-right: 240px !important;
  }
}

Good luck!