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);
}
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%}
I’ve got messy hair and a thirsty heart.
I overshare my life, and have an ultra-expressive personality. Some words people use to describe me are: helpful, real, fun, creative, authentic, and kind.
Elphaba from Wicked is kind of my alter-ego as I am always trying to forge my own path and make a difference in the World, somehow, someway, while also constantly criticizing myself and trying to become the better version of me.
Quality conversations + coffee come easy to me.
I’ve never had an issue connecting naturally with others (probs because I can go on and on about my life story, not that it is interesting, I just process externally, anyone else?!)
can I float this to the center at all?
Yes, you just need to not have a spacer next to the image like I did. Let me know if that works!
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
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!