How to Create overlapping icons on Squarespace - Rebekah Read Creative

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. […] HOW TO CREATE OVERLAPPING ICONS ON SQUARESPACE (aka my FAVORITE code to use) […]

  2. can I float this to the center at all?

  3. 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 *

pair beautiful brand design with an intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs

Instagram is kind of my thing!
Let's connect!
@rebekahreadcreative

Home

Read The Blog

Contact Bekah

back to top

How to design a website that converts!  Learn my best tricks to SEO, copywriting + branding!

Let's connect!

I WANT THAT!