Create a Multi-Row Header in Squarespace

In this tutorial I show you how to create a multi-row header in Squarespace. With this method, you can place social media icons and contact info in the top bar of the header and the logo and navigation in the bottom bar creating a very appealing and popular header style.

Creating the Multi-Row Header

Custom CSS:

note: you will need to replace the image links with your own

.Header-inner--bottom {
  padding-bottom: 30px;
  padding-top: 30px;
}

.Header--bottom.Header--overlay {
  background-color: #fff!important;
}

.Header-nav--secondary .Header-nav-inner {
  position: relative;
  margin-left: 0px!important;
  a:first-child:before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    background: url(https://static1.squarespace.com/static/5c6744abaf468340a2244abf/t/5c881cb3419202edfc4882ac/1552424115828/email.png);
    margin-left: -35px;
    background-size: contain;
    top: 5px;
  }
  a:last-child:before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    background: url(https://static1.squarespace.com/static/5c6744abaf468340a2244abf/t/5c881d5e652deae510fc1f5c/1552424286993/phone.png);
    margin-left: -35px;
    background-size: contain;
    top: 5px;
  }
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris