Centralize Header and Link Titles

Hello,

I am trying to centralize my header on Squarespace. I want the logo to remain in the center, and I want to split the link titles (there are four) and put two on each side.  I want to also space them out more than the default setting.

Here is what my header currently looks like: 

Here is what I want it to look like (it’s Photoshopped):

Site link: http://thegoalside.com

If anyone has a CSS code to achieve this, it would be greatly appreciated.

Best,

Ben Rowe

Hello,

Thank you very much for your reply. I now have the link titles split into two on each side.

Now, would it be possible to space these out similar to how they looked in my Photoshop image? I would like them to be closer to the center of the header, if possible. I'm wondering if there are some numbers that we can add to the custom CSS to transform and space them out like this. Then, I can adjust the numbers as needed. Thanks!

Best,
Ben Rowe

5 minutes ago, benrowe said:

Hello,

Thank you very much for your reply. I now have the link titles split into two on each side.

Now, would it be possible to space these out similar to how they looked in my Photoshop image? I would like them to be closer to the center of the header, if possible. I'm wondering if there are some numbers that we can add to the custom CSS to transform and space them out like this. Then, I can adjust the numbers as needed. Thanks!

Best,
Ben Rowe

Replace the previous code with the code below. And you can increases the space between nav item by editing your header. See images

.header-display-desktop {
  min-height: 90px;
  position: relative;
  .header-title-nav-wrapper {
    flex: 0 0 100% !important;
    .header-nav{
      flex: 0 0 100% !important;
      .header-nav-list {
        width: 100%;
        max-width: 1050px;
        display: flex !important;
        margin: 0 auto !important;
      }
      .header-nav-item:nth-child(3) {
        margin-left: auto !important;
      }
    }
    .header-title {
      position: absolute;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%, 50%) !important;
      z-index: 999999;
    }
  }
}