Centering Nav Links on each side of Site Title falls apart as the screen size decreases

I've done some Custom CSS to have my nav links split on symmetrically with my site title in the center. My issue is that as the screen size decreases, the nav links begin to fall apart in a terrible way. I'd prefer that they don't wrap at all until they become a bar menu. You can see what I mean by inspecting the page and sliding the page smaller. I've tried more than a few things online, and my plan doesn't allow me to do code injection so I'm stuck with just css here. Perhaps the spacing between the links can get smaller as the page size decreases? I want to keep the even spacing across the page (a setting I set with the slider not with css), but the higher the vw on the Link Spacing (4vw right now) the earlier they wrap. I'd like it at 5vw but then it wraps on the desktop width. Additionally, somehow this code makes the hyperlinks disappear from the nav items.

My Code:

.header-layout-branding-center-nav-center .header-display-desktop{
  // Title + nav links
  .header-title-nav-wrapper{
    flex: 1 0 100%;
  }
  // The buttons on the right
  .header-actions{
    width: 0%;
  }
  // The title inside the first class
  .header-title{
    width: 20%;
    flex: 1 1 20%;
    z-index: 999999999;
  }
  // Keeps title logo clickable
  .header-title-logo a {
    z-index: 1000;
    position: relative;
}
  // Splits nav on 3rd item
  .header-nav-item:nth-of-type(3) {
    margin-right: 300px!important;
}
  
  // The links 
  .header-nav{
    width: 80%;
    flex: 1 1 80%;
    position: absolute;
    top: 0px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
  }
}

can you share your link?

@JayVanDyke ethandillinger.com

Aplogies, I thought it would be mentioned when the post asked for it

@sokkamf solving this with pure CSS is definitely a challenge but probably you'll just need to do some adjustments at different breakpoints or do some more fine tuning of your numbers. 

Here's a few things that might help get this working better. When I set all these in my browser it seems to pretty much work all the way down to 800px when it flips to the mobile menu style.

I would set this to not have the ability to grow or shrink but sticks to a specific size. 200px works decently on desktop but obviously feel free to tweak it a bit. This solves a few things, it gives us a fairly consistent width to work with and it also stops the issue of not being able to click on your links.

.header-title{
    width: 200px;
    flex: 0 0 200px;
    z-index: 999999999;
  }

Then I might make this be 100% of the width instead of 80 just so you have a little more room as the page size shrinks. 

.header-nav{
    width: 100%;
    flex: 1 1 100%;
}

Make your actual links a specific size too and have no margins. Padding works a bit in the bigger sizes but smaller its hard to get it to not wrap.

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 80px !important;

  @media only screen and (min-width: 900px) {
    padding: 0 1%;
  }
}

This margin now still works ok but you might be able to make that space a bit smaller.

.header-nav-item:nth-of-type(3) {
    margin-right: 225px!important; //a little bigger than the title
}

I appreciate you taking the time and looking!

I fear I may be incorporating your solution into my code incorrectly. These additions place the title and nav items directly on top of each other in addition to wrapping. However, if I remove this bit of code

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 80px !important;

  @media only screen and (min-width: 900px) {
    padding: 0 1%;
  }
}

I get around the wrapping issue and it returns to normal. So this is definitely progress, but unfortunately the spacing is too close to the site title for my liking, and the nav items no longer being hyperlinks issue persists. I can't figure out how to have the wrapping set the way you have it and incorporate the spacing I like, and I'm absolutely lost on where the hyperlinks get removed at.

If you want me to try and debug I'll need you to put all the code back in

It's all there

@sokkamf yea a few issues. Some of this needs to just be more specific in the code so I've got that updated to try.

Another one is that this code isn't doing anything at all since you don't have a logo but you're using text instead

// Keeps title logo clickable
  .header-title-logo a {
    z-index: 1000;
    position: relative;
}

This also seems like its not exactly what I had sent over

It needs to be the same as below. The 0s make sure it stays set to 200px so we're saying flex-grow: 0 and flex-shrink: 0 and flex-basis: 200px. If you do flex 1 1 200px then it can both grow and shrink larger than 200px.

flex: 0 0 200px;

Try replacing the whole thing with this

.header-layout-branding-center-nav-center .header-display-desktop {

    .header-actions {
        width: 0%;
    }
    
    .header-title-nav-wrapper {
        flex: 1 0 100%;
        .header-title {
            width: 200px;
            flex: 0 0 200px !important;
            z-index: 999999999;
        }

        .header-nav {
            width: 100%;
            flex: 1 1 100%;
            position: absolute;
            top: 0px;
            bottom: 0;
            margin-top: 0 !important;
            margin-left: 0px !important;

           .header-nav-list .header-nav-item {
                margin-right: 0 !important;
                margin-left: 0 !important;
                width: 80px !important;

                @media only screen and (min-width: 900px) {
                    padding: 0 1%;
                }

                &:nth-of-type(3) {
                    margin-right: 300px !important;
                }
            }
        }
        
    }

}

Ah okay. I see where I missed that part of the instructions. This fixes the link issue (curious which part was causing it?) and most of the layout problems. The right margin between my last name and 'Trips' is quite wide though, and it moves farther away as the screen decreases. Is there anyway to keep the wider spacing that I had before along with avoiding wrapping?

Edit - I changed 

.header-nav-list .header-nav-item { width 80px --> 130px; }

to achieve the more spaced out look, which does move the list to the right some but the wrapping remains the same in either.

Also - How can I even out the spacing between 'Personal' and 'Ethan' to match the spacing of the distance between nav items?

The wide spacing you have is going to be impossible to setup without wrapping with CSS. And achieving some kind of evenness with your logo is possible but totally done by eyeballing it since the two elements aren't actually related to each other in the html. You're now making each nav item 130px plus we have extra padding between each one which brings them around 150px total, then your logo is set at 200px. We're also then leaving an extra 25px for the logo spacing. This puts all this stuff to around 1100px +  with only the padding on either side of the links able to adjust based on screen width.

You're trying to achieve a responsive split menu (that squarespace doesn't offer) and keep wide spacing even as the screen runs out of room for those large numbers. I honestly don't think there's anyway for you to achieve something that flexible with your constraints and this as a workaround to your menu without changing the width of the nav items to something smaller and then maybe making the padding a different dynamic value and then change that value as the screen gets smaller with different breakpoints.

The only way to do this without a ton of css code will be to upgrade and use javascript.

If you want to do breakpoints for the width of the nav items you could use this template and keep trying numbers as you go. These are just arbitrary numbers so you'll need to adjust and possibly add more breakpoints all the way down to 800px when it switches to mobile nav.

@media only screen and (max-width: 1300px) {
  width: 120px !important;
}
@media only screen and (max-width: 1200px) {
  width: 110px !important;
}
@media only screen and (max-width: 1100px) {
  width: 100px !important;
}
@media only screen and (max-width: 1000px) {
  width: 90px !important;
}

I worried I might end up here. I may have to cave and just put the logo above the words or accept a smaller space. I originally had it mostly figured out with code injection before I started a subscription and realized they don't allow it on a personal plan. 

Thank you for taking the time to investigate this for me 🙂