May 22, 2020

How to Create overlapping icons on Squarespace

Posted in: 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

Leave a Reply

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

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

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

Home

Read The Blog

About Bekah

Contact Bekah

back to top

Free website copywriting help

for all creatives

for the entrepreneur who is burned out and overwhelmed with the idea of copywriting and will give you actionable steps and strategies to make copy do the hard work for you.

Get it now! >>