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: This works with parallax enabled, but not if the background of the float section is an image. You will need to set the background and text color with CSS for this to work with parallax.

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 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