How To Create Overlapping Logo in Squarespace 7.1
First things first, download the Chrome extension Squarespace Collection/ Block Identifier. It will pop up in the upper right hand corner of your screen when you are using Chrome:
Then find the block code of the element you want to overlap 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!
The code you will be using is:
#block-yui_whatever{margin-top-150px}
Example:
#block-yui_3_17_2_1_1618979555098_10962 {margin-top:-30%}
Want to see a video tutorial of how to overlap a photo/ icon on Squarespace 7.0? It is very similar to how you do it in 7.1. Watch below!
Sometimes this ends up messing things up on mobile.
In that case, you can try to finagle everything, or you can just hide the element altogether on mobile.
Want my top 5 favorite codes to use on Squarespace?
(Besides this Squarespace code of course)
Read other blogs about: Squarespace
Hey, I'm Bekah! Web designer, Squarespace Circle Gold Partner, marathon runner, and mama of two. I built Rebekah Read Creative in 2018 after leaving corporate America, and I've spent the years since helping purpose-driven entrepreneurs stop cringing at their websites and start getting found on Google.
I'm the kind of person who overshares, processes out loud, and goes all in on whatever has my heart, whether that's running a 50k or building someone's website in a single day. Quality coffee and real conversations are basically my love language.
If you're here, you're probably tired of the Instagram hustle and ready for a website that actually works for you. You're in the right place.
