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.
#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);
}
Be the first to comment