Floating Banner Over Two Index Sections in Squarespace

In this Squarespace tutorial, I show you how to position an index section so that it overlays two other sections. This is really good for creating eye catching calls to action and adding more variety to your Squarespace layouts.

Create an Index Section that Overlays Two Other Sections

Note: I have updated the CSS and this DOES work with parallax enabled, but not when the section following the floating banner is an index section with a background image.

Custom CSS:

#float-section {
  width: 80%;
  position: absolute;
  z-index: 30;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%,-50%);

  .Index-page-content {
    padding: 3em 2em;
  }

  & + section {
    padding-top: 80px;
  }
}

If you need help adapting this technique to your specific website, I now offer that as a paid service. Please send me an email and I will be happy to assist with your site.

Cheers!
Chris