Squarespace Guide: Stop Video Background Being Cut Off by Header

One of the most annoying things to happen when I’m designing Squarespace websites is when I add a great video to the hero section of the web page, only for the top of the video to be cut off by the website header.

It looks messy and unprofessional. Luckily for you, I came up with some simple code to stop this from happening.

Watch the video

Check out the YouTube video below 👇

Once you’ve uploaded your video to your hero section, head to Website > Website Tools > Custom CSS and add in the following code:

#SECTION-ID {

margin-top: 100px;

}

Use your Google Chrome Squarespace Block ID finder plugin to get the section ID for your hero section and add this before your code brackets. This tells Squarespace that this code is to target that section.

You can have a play around with the amount you choose for the px within the code, moving your hero section down just enough to stop your video being cut off.

Once you’re happy with how it looks, don't forget to check the mobile view (you may need to adjust your px if it doesn’t quite line up on mobile) and then hit save.

---

📩 Join the inner circle to get exclusive code updates

---

This is a handy piece of code to have in your resource bank for when you're building Squarespace websites.

For more tips and tricks check out my blog full of Squarespace resources.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?