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

}

overlapping icons on squarespace
checklist to improve your website seo and copywriting

Leave a Reply

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

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

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

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!