⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
For anyone looking to have the image overlap on the section BELOW, change the z-index to {z-index:999} on the top section/section with the image and it will overlap the lower section. You may need to adjust the number of 9s in the index number depending on your site.
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
Hi! Thanks so much for all your videos they are amazing. Im trying to do this on the new fluid enjin and can get it to work. I have used the code from this video and it moves it up but its under the section about. Is there any way to do this on the new fluid engine? Thanks in advance!
Oooh I like this idea! I’ll see what I can do; not sure if it’s editable in the site wide CSS but we might be able to do some code injection magic... stay tuned 🤔
This works without a divider. It still works with a divider, but only when I go from above. When I try to pull up from a section the image hides under the divider. How do I fix this?! I'm losing my mind!!
That is so interesting - a divider is placed on the bottom of the prior page section, not the top of the new one, so I have no idea why that would happen, and im struggling to recreate it. Can you send me a link to the page you're working on? I'm happy to take a peek at the source code to see whats overwriting it! support-at-insidethesquare.co
@@InsideTheSquare Hello, did you find a work-around for this? I'm having the same issue but I also can't go from above as it is making the divide drop down further so the item never crosses over the divide.
Hey Adam! Great question - I just tried it on my demo site and it's a super easy code fix! The code below will pull up the site content and keep the logo on the top of everything. Super important thing to mention: if you don't have a separate logo for mobile, you might wanna adjust the size for smaller devices to be a little different. 😬 I have more info about mobile codes at insidethesquare.co/mobile Anywho - here is the code for desktop; just change up the -5rem until it's in the right place! 👍👍 .header-title-logo img{margin-bottom:-5rem}
Hello! I was able to add an image in the footer and make it appear partially over the last content section by changing the z-index of the "footer-sections" ID (my code : #footer-sections {z-index: 100 !important;}) Thank you Becca for the tutorial who helped me achieve this!!!!
Hey, I have attempted to use this code to pull an image up into the header of my page. Which did work! Only, now there is a gap between the bottom of the image and the bottom of the section. How can I avoid this gap?
Hey!!! Love your videos by the way! Do you happen to know how I could do the same thing if there are more than one image? Because right now, when I put the code in, Its not working for that one image, maybe because I've got lots of images in my page?
Hey Agnes! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
Hi! Thanks so much for all your videos they are amazing. Im trying to do this on the new fluid enjin and can get it to work. I have used the code from this video and it moves it up but its under the section about. Is there any way to do this on the new fluid engine? Thanks in advance!
Fluid engine sections will work the same way as the classic ones in 7.1 - you need to add the image to the first section so it will overlap the second, not the other way around. Hope that info helps and best of luck with your project!
Awwwww, thanks!😊 Have you watched insidethesquare.co/squarespace-tutorials/gallery-caption yet? That might help, if not, feel free to submit a code help request with more info here: insidethesquare.co/code-help
Nope - it won't work - and I covered this at the 03:08 minute mark of the tutorial. 👍👍 . The image needs to be later in the document tree. If it's in a higher section, it will be overlapped by anything later in the document tree, like a lower page section.
This is amazing, thank you! Quick q: is there a way to have images overlap the section *below*? I tried the code and switched it to "margin-bottom" and it works...but the image disappears behind the section below it (as opposed to overlapping on top)! I'm sure it's because of some Squarespace/coding wizardry, but wanted to know if you knew a workaround :)
Hey Renee! It's hard to say without seeing the code for your site BUT you can try adding z-index:99 to your code to make it a top layer! 😬 Hope that helps.. and if not, feel free to submit a code request here: insidethesquare.co/code-help
Still works exactly the same! Make sure the overlapping page is in the lower section so it will be a higher later than the content above it that it’s supposed to overlap 👍👍
@@InsideTheSquare Love your stuff so much! You've helped with a ton of issues for me! So I added an image in the section Ibelow a header with a divider and the image is behind the header image - is there anyway to make it float on top instead?
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Value. Educational. Straight-forward! Thank you for the video.
Exactly what I need right now. Love your work, thanks Becca!
You are always the best - thanks for being such a great teacher!
Thank you for this easy tutorial! ❤
WOW THANK YOUUUUU
You’re welcome! Happy to help. 😎
For anyone looking to have the image overlap on the section BELOW, change the z-index to {z-index:999} on the top section/section with the image and it will overlap the lower section. You may need to adjust the number of 9s in the index number depending on your site.
Thanks for wanting to help others out!
Can you provide an example of how the overall code would look with using "{z-index:999}" in it?
Thanks!
You’re welcome! Happy to help ☺️
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
Hi! Thanks so much for all your videos they are amazing. Im trying to do this on the new fluid enjin and can get it to work. I have used the code from this video and it moves it up but its under the section about. Is there any way to do this on the new fluid engine? Thanks in advance!
Any chance you can show up how to edit/ customize the access denied screen? the text content width is SO SMALL.
Oooh I like this idea! I’ll see what I can do; not sure if it’s editable in the site wide CSS but we might be able to do some code injection magic... stay tuned 🤔
omg thanks a lot.
You’re welcome! Happy to help. 😎
This works without a divider. It still works with a divider, but only when I go from above. When I try to pull up from a section the image hides under the divider. How do I fix this?! I'm losing my mind!!
That is so interesting - a divider is placed on the bottom of the prior page section, not the top of the new one, so I have no idea why that would happen, and im struggling to recreate it. Can you send me a link to the page you're working on? I'm happy to take a peek at the source code to see whats overwriting it! support-at-insidethesquare.co
@@InsideTheSquare Hello, did you find a work-around for this? I'm having the same issue but I also can't go from above as it is making the divide drop down further so the item never crosses over the divide.
Can you do this with a logo in the navigation bar? Split between site header and content?
Hey Adam! Great question - I just tried it on my demo site and it's a super easy code fix! The code below will pull up the site content and keep the logo on the top of everything. Super important thing to mention: if you don't have a separate logo for mobile, you might wanna adjust the size for smaller devices to be a little different. 😬 I have more info about mobile codes at insidethesquare.co/mobile
Anywho - here is the code for desktop; just change up the -5rem until it's in the right place! 👍👍
.header-title-logo img{margin-bottom:-5rem}
@@InsideTheSquare You're amazing - thanks so much for the reply. Love the channel keep it up!
do you have a tutorial on how to do this with a regular section and the footer below?
I do not - but I will add that to my tutorial to do list! Thanks for the suggestion 😁
Hello! I was able to add an image in the footer and make it appear partially over the last content section by changing the z-index of the "footer-sections" ID (my code : #footer-sections {z-index: 100 !important;}) Thank you Becca for the tutorial who helped me achieve this!!!!
Hey, I have attempted to use this code to pull an image up into the header of my page. Which did work! Only, now there is a gap between the bottom of the image and the bottom of the section. How can I avoid this gap?
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Any recommendations for achieving this with Fluid Engine?
Hey Martin! Great question! I've been working on some Fluid Engine tutorials and resources. You can learn more here: insidethesquare.co/fluid
Hey!!! Love your videos by the way! Do you happen to know how I could do the same thing if there are more than one image? Because right now, when I put the code in, Its not working for that one image, maybe because I've got lots of images in my page?
Hey Agnes! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
Hi! Thanks so much for all your videos they are amazing. Im trying to do this on the new fluid enjin and can get it to work. I have used the code from this video and it moves it up but its under the section about. Is there any way to do this on the new fluid engine? Thanks in advance!
Fluid engine sections will work the same way as the classic ones in 7.1 - you need to add the image to the first section so it will overlap the second, not the other way around. Hope that info helps and best of luck with your project!
Hi to the queen of CSS ! I need to do the same with a gallery, trying to mix different codes and searching again and agian... Any helppppp ?
Awwwww, thanks!😊 Have you watched insidethesquare.co/squarespace-tutorials/gallery-caption yet? That might help, if not, feel free to submit a code help request with more info here: insidethesquare.co/code-help
Is there an updated link for the Chrome Extension? I am unable to access it from the link in the description.
Nope - that one still works for me! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Can you do this with margin-bottom too? I tried and it didn't work.
Nope - it won't work - and I covered this at the 03:08 minute mark of the tutorial. 👍👍
. The image needs to be later in the document tree. If it's in a higher section, it will be overlapped by anything later in the document tree, like a lower page section.
This is amazing, thank you! Quick q: is there a way to have images overlap the section *below*? I tried the code and switched it to "margin-bottom" and it works...but the image disappears behind the section below it (as opposed to overlapping on top)! I'm sure it's because of some Squarespace/coding wizardry, but wanted to know if you knew a workaround :)
Hey Renee! It's hard to say without seeing the code for your site BUT you can try adding z-index:99 to your code to make it a top layer! 😬 Hope that helps.. and if not, feel free to submit a code request here: insidethesquare.co/code-help
how does this work on fluid engine now?
Still works exactly the same! Make sure the overlapping page is in the lower section so it will be a higher later than the content above it that it’s supposed to overlap 👍👍
@@InsideTheSquare thank you! Im going to give this a try then 🫶🏽
@@InsideTheSquare Love your stuff so much! You've helped with a ton of issues for me! So I added an image in the section Ibelow a header with a divider and the image is behind the header image - is there anyway to make it float on top instead?
Heads up, The Block ID extension finder has expired and no longer available
Strange - try this link: chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
first comment lets gooooo