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

overlapping icons on squarespace
checklist to improve your website seo and copywriting
  1. can I float this to the center at all?

  2. Jacqueline Burtney says:

    Hi!

    I’m hoping you can help me out! I’ve applied the code and it is definitely overlapping, which is amazing! Thank you! But it only overlaps when my page break is small (window is a bit collapsed, like iPad view). When I expand to desktop view it pops up to the top of my screen. Do you have any ideas of how I can keep it in place in every view?

    Thanks in advance. – Jax

    • Rebekah Read says:

      I don’t, sorry! I am definitely not a coding master. You could reach out to Becca at InsideTheSquare or Beatriz Caraballo – they both are Squarespace coding experts!

Leave a Reply

Your email address will not be published. Required fields are marked *

with their Showit or Squarespace website with intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs

Home

Read The Blog

Privacy policy

back to top

How to design a website that converts!  Learn how to DIY your website with this FREE guide.

Let's connect!

I WANT THAT!