How to Create overlapping icons on Squarespace

If you want to create a floating banner or icon over two index sections on Showit, it is VERY easy, unfortunately it is a bit more tricky in Squarespace.

First of all, you need to make sure you have a Brine 7.0 template (because we need the index pages). Then you can follow this video and use the code at the end to create your eye-catching technique.

NOTE: This will work with parallax enabled, but not if the section following the floating banner is an index section with a background image.

THE CODE:

#float-2 {

  width: 80%;

  position: absolute;

  min-height: initial!important;

  z-index: 30;

  left: 60%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%,-50%);

  .Index-page-content {

    padding: 3em 2em;

  }

  & + section {

    padding-top: 80px;

  }

}

#float-2 {

 background-color:rgba(0,0,0,0);

}

WANT TO CREATE OVERLAPPING ICONS IN SQUARESPACE 7.1?

It’s even easier! Just find the block code using the “Squarespace Collection/ Block Identifier” plugin for Chrome and then add that bit of code with margin-top after it and if you want it further up increase from 30% to 90% for example!

#block-yui_3_17_2_1_1618979555098_10962 {margin-top:-30%}