Скачать или смотреть How to create a static Title Overlay for Banner Slideshows - Squarespace 7.1 Tutorial

PatrickJ on the Squarespace Circle Forum wanted to know how to center the Section Title of a Banner Slideshow on top of the slideshow itself, and keep it static while the slides move beneath it.

There's only two small snippets of CSS needed to achieve this, and it works well regardless of screen size.

One thing that I didn't touch on in the video is that, if like Patrick you're using really large text for the title, you may need to do some extra fiddling to avoid the text overflowing or overlapping on mobile!

Feel free to ask any questions in the comments below, if you get stuck or want to know a bit more.

=============================================

If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :)
https://www.kwameand.co/say-thanks

Interested in more Squarespace tutorials, tips and tricks?
Why not visit the SquareSkills website for more content like this:
https://www.SquareSkills.dev
  / squareskills  
  / squareskills  

If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website:
https://www.kwameand.co/work-with-us
  / heykwame  
  / kwameand.co  

Here's the code used in the video. You can modify the properties to tailor it to match your branding and style - or take it even further.

=============================================

Insert into Custom CSS:

/*-------------------------------
Static Banner Slideshow title Overlay
Squareskills.dev
-------------------------------*/
#sectionID {
.list-section-title {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9; //can be any number that's high enough
pointer-events: none;
}
//remove top spacing
.section-title-vertical-padding-spacer {
display: none;
}
}