Custom squarespace checkerboard header

Hi Squarespace community! I am new to using custom code in Squarespace and am trying to configure how to customize my navigation to suit my design for a pizza parlor. By using the Squarespace feature to align the logo above the navigation in the middle of the screen, I was hoping to achieve the attached design for my navigation. 

So far here is how I've done it, but I'm having trouble creating a split in the middle section for the logo whilst keeping the pattern on the left and right.

I would really appreciate any help I could get!

This is the css I'm using to create a 3 column split:

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;

}

.left, .right {
  width: 40%;
}

.middle {
  width: 20%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.board {
    display: grid;
    grid-template-columns: repeat(10, 32px);
  }

  .square {
    width: 32px;
    height: 32px;
    background: #e6940a;
  }

  .square:nth-child(20n + 1),
  .square:nth-child(20n + 3),
  .square:nth-child(20n + 5),
  .square:nth-child(20n + 7),
  .square:nth-child(20n + 9),
  .square:nth-child(20n + 12),
  .square:nth-child(20n + 14),
  .square:nth-child(20n + 16),
  .square:nth-child(20n + 18),
  .square:nth-child(20n + 20) {
    background: #fff0d9;
  }

I've injected this into the header for the checkerboard design:

<header>
<div class="row">
  <div class="column left">
<div class="board"> 
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
  </div>
  
  
  <div class="column middle" style="background:#fff0d9;">

  </div>
  
  
  <div class="column right">
  <div class="board"> 
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

  </div>
</div>
</header>

Can you share site url?

Hi tuanphan, thanks for reaching out

https://helicon-harmonica-g53a.squarespace.com/

Pw: abc

I have tried to figure a way around it but as you can see not exactly what I was hoping for

On 8/28/2024 at 12:24 PM, Tyrone_HM said:

Hi tuanphan, thanks for reaching out

https://helicon-harmonica-g53a.squarespace.com/

Pw: abc

I have tried to figure a way around it but as you can see not exactly what I was hoping for

You mean achieve this layout?

Hi tuanphan, yes exactly that is the layout I'm trying to achieve